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   red      How can I get the same result  It s important that it has to be done with jQuery but for some reason it doesn t work  Any suggestions  Thanks

User · Answer

You can try this       myclass   mouseover function           this  find    gt  div   css  background-color   red       mouseout function           this  find    gt  div   css  background-color   transparent          DEMO

User · Answer

Use JQuery Hover to add remove class or style on Hover         mah div    hover    function            this   css  background-color   red         function            this   css  background-color         to remove property set it to

User · Answer

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

User · Answer

Well  you can t add styling using pseudo selectors like  hover   after   nth-child  or anything like that using jQuery    If you want to add a CSS rule like that you have to create a  lt style gt  element and add that  hover rule to it just like you would in CSS  Then you would have to add that  lt style gt  element to the page   Using the  hover function seems to be more appropriate if you can t just add the css to a stylesheet  but if you insist you can do      head   append   lt style gt  myclass hover div  background-color   red   lt  style gt     If you want to read more on adding CSS with javascript you can check out one of David Walsh s Blog posts

User · Answer

It s too late  however the best example  how to add pseudo element in jQuery style   x000D   x000D     document  ready function    x000D      a dummy   css   background    003d79   color    fff   padding    5px 10px   border-radius    3px   text-decoration   none     x000D      a dummy   hover function     x000D                this  css  background-color    0670c9   x000D               mouseout function    x000D                  this  css   background-color    003d79      x000D                x000D    x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 4 1 jquery min js  gt  lt  script gt  x000D   lt a class  dummy  href  javascript void    gt Just Link lt  a gt  x000D   x000D   x000D

User · Answer

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

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

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css