Css 悬停效果 Jquery

Question

.parent:hover .child

我正在尝试做这件事，但仅限于 jQuery。

Answer 1

我建议使用 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 Fiddle example

Answer 2

检查下面的代码片段以解决您的问题。您可以使用带有两个函数的悬停事件作为参数。

$(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>

祝你好运。

Css 悬停效果 Jquery

Css Hover Effect with Jquery

jquery

hover