Переход цвета фона

Question

Я пытаюсь сделать эффект перехода с 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 список пунктов.

Answer 1

Насколько я знаю, в настоящее время переходы работают в 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

Answer 2

Для меня, лучше поставить коды перехода с оригинальными / минимальными селекторами, чем с: hover или любыми другими дополнительными селекторами:

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