Transition de la couleur de fond

J'essaie de faire un effet de transition avec le background-colorsurvol 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;
}

Il #nav divs'agit d'une ulliste de menus d'éléments.

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

<a>Navigation Link</a>

Remarque: Comme l'a souligné Gerald dans les commentaires, si vous placez la transition sur le a, au lieu de sur, a:hoverelle se fondra à la couleur d'origine lorsque votre souris s'éloignera du lien.

Cela pourrait également être utile: Principes de base de CSS: Transitions CSS 3

Pour moi, il est préférable de mettre les codes de transition avec les sélecteurs d'origine / minimum qu'avec le: 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;
}

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