How To Show CSS Transitions Only On Hover?

I have added a transition onto a div, so that when it is hovered on, the color changes, bit like this example here: http://jsfiddle.net/78LWT/ Here's the HTML code:

Copy

Demo 2 (background-color won't change though, read ahead)

Note: Anyways you will need the below solution as well, else your background-color won't be changed

Demo 3 (If you care to :hover even after changing the background-color using jQuery)

---

That is because jQuery adds inline CSS which has highest preference/most specific and hence, :hover background-color won't be respected, you will have to use !important in this case

Demo

#transition:hover {
    background-color: #ADE1E1 !important;
}

---

Or else, it would be better, if you prefer adding and removing class using jQuery, instead of using .css() method, than you won't require !important as well.

Share

You may like these posts

• 
  Use A Function In Ng-class In Angular Js
• 
  Chrome Extension With Declarativecontent.requestcontentscript
• 
  How Can I Create Overlapping Images That Reveal Themselves As You Scroll
• 
  Angularjs Bug In Ie With Style Vs Ng-style