Übergang der Hintergrundfarbe

Ich versuche, background-colorbeim Bewegen von Menüelementen einen Übergangseffekt zu erzielen , aber es funktioniert nicht. Hier ist mein 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;
}

Das #nav divist eine Menüliste ulvon Elementen.

Soweit ich weiß, funktionieren Übergänge derzeit in Safari, Chrome, Firefox, Opera und Internet Explorer 10+.

Dies sollte in diesen Browsern einen Fade-Effekt für Sie erzeugen:

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>

Hinweis: Wie von Gerald in den Kommentaren hervorgehoben, wird der Übergang wieder auf die ursprüngliche Farbe zurückgesetzt , wenn Sie den Übergang auf den setzen a, anstatt a:hoverihn zu aktivieren.

Dies kann auch nützlich sein: CSS-Grundlagen: CSS 3-Übergänge

Für mich ist es besser, die Übergangscodes mit den ursprünglichen / minimalen Selektoren zu versehen als mit: hover oder anderen zusätzlichen Selektoren:

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