How to define the css :hover state in a jQuery selector?

Question

I need to define a div\'s background color on :hover with jQuery, but the following doesn\'t seem to work:

$(\".myclass:hover div\").css(\"background-color\         


        

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.

As commented by @A.Wolff, 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 Demo