Transition of background-color

Question

I'm trying to make a transition effect with background-color when hovering menu items, but it does not work. Here is my CSS code:

#content #nav a:hover {     color: black;     background-color: #AD310B;     /* Firefox */     -moz-transition: all 1s ease-in;     /* WebKit */     -webkit-transition: all 1s ease-in;     /* Opera */     -o-transition: all 1s ease-in;     /* Standard */     transition: all 1s ease-in; } 

The #nav div is a menu ul list of items.

Answer 1

As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+.

This should produce a fade effect for you in these browsers:

a {      background-color: #FF0;  }    a:hover {      background-color: #AD310B;      -webkit-transition: background-color 1000ms linear;      -ms-transition: background-color 1000ms linear;      transition: background-color 1000ms linear;  }

<a>Navigation Link</a>

Note: As pointed out by Gerald in the comments, if you put the transition on the a, instead of on a:hover it will fade back to the original color when your mouse moves away from the link.

This might come in handy, too: CSS Fundamentals: CSS 3 Transitions

Answer 2

To me, it is better to put the transition codes with the original/minimum selectors than with the :hover or any other additional selectors:

#content #nav a {      background-color: #FF0;            -webkit-transition: background-color 1000ms linear;      -moz-transition: background-color 1000ms linear;      -o-transition: background-color 1000ms linear;      -ms-transition: background-color 1000ms linear;      transition: background-color 1000ms linear;  }    #content #nav a:hover {      background-color: #AD310B;  }

<div id="content">      <div id="nav">          <a href="#link1">Link 1</a>      </div>  </div>