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, :hoverbackground-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

• 
  Nested Flex Elements Don't Make Parent Grow
• 
  Animate Some Divs Only Once
• 
  Use Css To Create A Custom Arrow Shape
• 
  What Is The Best Way To Position These Elements Within A Div?