使用 Jquery 的 Css 悬停效果

Question

.parent:hover.child

I'm trying to do this exact thing but only with jQuery.

Answer 1

I would suggest to use CSS over jquery ( if possible) otherwise you can use something like this

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

You can change your selector as per your need.

If you want to use this hover effect to multiple classes, you can use it like this

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

JS Fiddle example

Answer 2

Check below code snippet for your concern. You can use the hover event with two functions as an argument.

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

Best of luck.