Эффект постепенного осветления фона меню

[Delat]

Как сделать, чтобы при наведении курсора на главное меню, более светлый красный цвет появлялся не мгновенно, а постепенно, с не большой задержкой?

http://prodpak.ru

(Мне кажется нужно использовать: псевдоэлемиенты + z-index + JS )

[Kray Storm]

Если без скриптов, то можно посмотреть в сторону transition. Но там нужно проверять кроссбраузерность.

[zlodeev]

.menu LI:hover {
background: #E51E10;
transition-property: color;
transition-duration: .5s, .5s;
transition-timing-function: linear, ease-in;
-webkit-transition-property: color;
-webkit-transition-duration: .5s, .5s;
-webkit-transition-timing-function: linear, ease-in;
}

Edited May 5, 2013 by zlodeev

[Delat]

.menu LI:hover {
background: #E51E10;
transition-property: color;
transition-duration: .5s, .5s;
transition-timing-function: linear, ease-in;
-webkit-transition-property: color;
-webkit-transition-duration: .5s, .5s;
-webkit-transition-timing-function: linear, ease-in;
}

добавил в свойство transition-property: background-color, color; значение background-color и всё заработало, но в IE9.0.8 не работает.

А как делают чтобы было кроссбраузерно?

[zlodeev]

Попробуй прописать еще -ms-transitions, но вроде ie9 не поддерживает именно транзишены.

На ie10 должно быть все ок. Судя по таблице поддержки

[sashakee]

Может pie.htc поможет, если подключить

[max2012]

.menu LI:hover {
background: #E51E10;
transition-property: color;
transition-duration: .5s, .5s;
transition-timing-function: linear, ease-in;
-webkit-transition-property: color;
-webkit-transition-duration: .5s, .5s;
-webkit-transition-timing-function: linear, ease-in;
}

добавил в свойство transition-property: background-color, color; значение background-color и всё заработало, но в IE9.0.8 не работает.

А как делают чтобы было кроссбраузерно?

Пускай деградирует без анимации