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 know this has an accepted answer but if anyone comes upon this, my solution may help.

I found this question because I have a use-case where I wanted to turn off the :hover state for elements individually. Since there is no way to do this in the DOM, another good way to do it is to define a class in CSS that overrides the hover state.

For instance, the css:

.nohover:hover {
    color: black !important;
}

Then with jQuery:

$("#elm").addClass("nohover");

With this method, you can override as many DOM elements as you would like without binding tons of onHover events.