Transition de couleur de fond

J’essaie de faire un effet de transition avec la couleur d’arrière-plan lorsque vous survolez des éléments de menu, mais cela ne fonctionne pas. Voici mon code CSS:

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

Le #nav div est une liste de menus.

Pour autant que je sache, les transitions fonctionnent actuellement dans Safari, Chrome, Firefox, Opera et Internet Explorer 10+.

Cela devrait produire un effet de fondu pour vous dans ces navigateurs:

 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; } 
 Navigation Link 

Pour moi, il vaut mieux mettre les codes de transition avec les sélecteurs d’origine / minimum qu’avec: hover ou tout autre sélecteur supplémentaire:

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