Как указать задержку для transition при hover?

Question

[Виталий Рыбченко]

Всем доброго дня!
Есть блок меню, он расширяется при наведении мыши

transition: width .30s linear;
width: 146px

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

Вроде как есть специальные свойства css, которые устанавливают задержку, но у меня ни в Google Chrome, ни в Firefox это не работает:

-webkit-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;

Что то делаю не так? Есть готовые решения на этот счет?

Comments

[Kroung]

Хоть и не актуально, но может, кто как и я будет искать ответ на вопрос, и забредёт сюда.
У CSS есть глобальные свойства и отвечающие за одно направление.
Так вот глобальные перекрывают точечные. Когда используется глобальное объявление, надо все свойства прописывать по их порядку(редко допускается перемешка). Поэтому лучше использовать точечное воздействие на элемент, если собираетесь в зависимости от условий менять его поведение.
backgroun, transition - и так далее

Answer 1

[Андрей Б.]

все работает

Comments

[Виталий Рыбченко]

Спасибо, Андрей - не знал что можно указать задержку в самом transition.

[Андрей Б.]

biovr Пожалуйста. Обратите внимание, что анимация в обратную сторону тоже с задержкой. Это можно исправить переместив transition в div:hover, тогда при отводе мыши див ужмется моментально.

[Виталий Рыбченко]

У меня так и есть, спасибо