Css Эффект наведения с Jquery

Question

.parent:hover .child

Я пытаюсь сделать это точно, но только с jQuery.

Answer 1

Проверьте приведенный ниже фрагмент кода для вашего беспокойства. В качестве аргумента можно использовать событие наведения с двумя функциями.

$(document).ready(function(){
  $(".parent").hover(function(){
    $(this).addClass("hover");
  },function(){
  $(this).removeClass("hover");
  });
})

.parent{
height:100px; 
width:200px;
background-color:#F00;
} 
.parent .child{
height:60px; 
width:160px;
background-color:#0F0;
margin:20px;
}
.parent.hover .child{
background-color:#00F;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
</div>
<div>

Удачи.

Answer 2

Я бы предложил использовать CSS сверх jquery (если возможно), иначе вы можете использовать что-то вроде этого

$("div.myclass").hover(function() {
    $(this).css("background-color","red")
});

Вы можете изменить свой селектор в соответствии с вашими потребностями.

Если вы хотите использовать этот эффект при наведении на несколько классов, вы можете использовать его следующим образом:

$(".myclass, .myclass2").hover(function(e) { 
    $(this).css("background-color",e.type === "mouseenter"?"red":"transparent") 
})

JS Пример скрипки