A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Home » Code Snippets » jQuery » Adding/Removing Class on Hover Submit one!

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.

Subscribe to The Thread

  1. Rodge says:

    isn’t it easier to use “toggleClass()” ????

    • There are many different ways to accomplish the same goal, its however invauable to know to many!

    • Pizatski says:

      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!

  2. Kaplan says:

    Simple but great code snippet.
    Thnx…

  3. Matt says:

    Thanks for the post, this works well when you want to be cross browser compatible and remove any :hover class’ from your CSS

  4. David says:

    You saved my life. thx

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---