Prechod farby pozadia - css3

Snažím sa vykonať prechodový efekt s farbou pozadia pri pohybe položiek menu, ale nefunguje Tu je môj CSS kód:

#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;
}

Na #nav div je zoznam položiek menu ul.

odpovede:

Pokiaľ viem, prechody v súčasnosti pracujú v Safari, Chrome, Firefox, Opera a Internet Explorer 10 .

To by malo produkovať fade efekt pre vás v týchto prehliadačoch:

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>

Poznámka: Ako zdôraznil Gerald v komentároch, ak dáte prechodu na a, miesto na a:hover to bude klesať späť na pôvodnú farbu, keď myši pohybuje od odkaz.

To môže prísť vhod, taky: CSS základy: CSS 3 prechody

Pre mňa je lepšie dať prechod kódy s originál/minimálne selektory než s: hover alebo akékoľvek ostatné dodatočné selektory:

#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>