Adding/Removing Class on Hover

$('#elm').hover(
       function(){ $(this).addClass('hover') },
       function(){ $(this).removeClass('hover') }
)

This will work in any browser on any element, to support styling changes on hover.

Rodge
09/23/2009
isn’t it easier to use “toggleClass()” ????
Reply ↓
- Alex Mcvitie
  01/10/2010
  There are many different ways to accomplish the same goal, its however invauable to know to many!
- Pizatski
  07/29/2010
  I realize this is about a year old, but the reason the add/remove class is more appropriate sometimes is if you have more than one trigger on a page for the same element. It’s simply more dummy-proof!
Kaplan
01/31/2011
Simple but great code snippet.
Thnx…
Reply ↓
Matt
02/01/2011
Thanks for the post, this works well when you want to be cross browser compatible and remove any :hover class’ from your CSS
Reply ↓
David
02/22/2011
You saved my life. thx
Reply ↓
Attila Hajzer
08/18/2011
howcome it doesn’t work with .click but it works with hover? it doesn’t make sense. what i want is when you hover over a list item, then there’s the hover color, then when you click i have a div appear (sliding down) then i want the LI #Show to have a yellow background-color then when clicked again the div goes away Display:hidden) and then i want the LI#Show to go back to its regular state. but i canonly get so far. where if the li is clicked once, then the div appears and the li background goes yellow, but once i click it again the div dissappears but the color does not go away.
Reply ↓