Przejście koloru tła

Próbuję zrobić efekt przejścia background-colorprzy najechaniu kursorem na elementy menu, ale to nie działa. Oto mój kod 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;
}

Jest #nav divto ullista pozycji menu .

O ile mi wiadomo, przejścia działają obecnie w Safari, Chrome, Firefox, Opera i Internet Explorer 10+.

Powinno to spowodować efekt zanikania w tych przeglądarkach:

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>

Uwaga: Jak zauważył Gerald w komentarzach, jeśli umieścisz przejście na a, zamiast na a:hovernim zniknie z powrotem do pierwotnego koloru, gdy mysz odsunie się od linku.

To też może się przydać: Podstawy CSS: Przejścia CSS 3

Dla mnie lepiej jest umieścić kody przejścia z oryginalnymi / minimalnymi selektorami niż z: hover lub innymi dodatkowymi selektorami:

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