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

Question

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

198

Я пытаюсь сделать эффект перехода с фоновым цветом при зависании элементов меню, но он не работает. Вот мой код 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 списка элементов.

jean-guy 10 дек. 2010, в 17:00

Источник

0

Просто к вашему сведению, это работает в Firefox сейчас. Проверено в FF9.
C.Brown 26 янв. 2012, в 22:34

Теги:

css3

2 ответа

Ещё вопросы

Просто к вашему сведению, это работает в Firefox сейчас. Проверено в FF9.

Ilium · Answer 1 · 2010-12-10T21-26-00.000Z

Насколько я знаю, в настоящее время переходы выполняются в 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 для перехода к оригиналу, когда пользователь отводит мышь от ссылки.
Поиграйте с переходами при наведении и клике по адресу: jsfiddle.net/K5Qyx
Не лучше ли поставить transition: в не зависание? Я думаю, что каждый раз, когда пользователь зависает, переход компилируется ..
для будущих пользователей здесь не должны использоваться префиксы поставщиков
@Claudiu: Я предполагаю, что вы имеете в виду «для будущих пользователей, которые не заботятся о поддержке устаревших браузеров»? В любом случае, префиксы поставщиков всегда будут иметь место в мире, вне зависимости от того, использовать их полностью или нет.
@ZaLiTHkA Chrome до 26 лет и Opera до 12 лет практически не имеют пользователей, и в том числе префиксы производителей теперь в этом случае не рекомендуется, поскольку он увеличивает размер файла без какой-либо выгоды.
CSS- transition видимому, не может обрабатывать цвет вида «линейный градиент», как можно проверить здесь . И кстати, ответ @ Ilium заслуживает того, чтобы быть отмеченным как решение.

Reza Mamun · Answer 2 · 2015-07-03T09-39-00.000Z

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

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

Дело не в том, что лучше или хуже. Просто если вы укажете переход на самом элементе, он будет анимирован при наведении элемента и на «раскрытие» элемента. Хотя, если вы примените его к: hover, у вас будет анимация, когда мышь входит, но не когда она уходит.
Это решение в целом лучше. Эффект перехода будет и должен постепенно исчезать при наведении и исчезать при размытии.