Перехід фонового кольору

Я намагаюся зробити ефект переходу, background-colorколи ви наводите курсор меню, але це не працює. Ось мій 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;
}

Це список #nav divменю ul.

Наскільки мені відомо, зараз переходи працюють у Safari, Chrome, Firefox, Opera та Internet Explorer 10+.

Це повинно створити ефект зникнення для вас у цих браузерах:

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>

Примітка: Як вказував Джеральд у коментарях, якщо ви помістите перехід на a, замість a:hoverнього він зникне до початкового кольору, коли миша відійде від посилання.

Це може стати в нагоді також: Основи CSS: Переходи CSS 3

Мені краще поставити перехідні коди з оригінальними / мінімальними селекторами, ніж із: курсором наведення або будь-яким іншим додатковим селектором:

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