Задать вопрос
yarhosting
@yarhosting
Заказывайте программинг: PHP,SQL, JS,jQuery,Joomla

Как сделать два эффекта с разной задержкой CSS (transition)?

У меня в диве .product два элемента. Хочу, чтобы при наведении .vm-product-descr-container - сразу плавно увеличил высоту, а поверх его с задержкой плавно появился .addtocart-area. При потере форкуса, должно быть наоборот: .addtocart-area - исчез плавно - сразу, а .vm-product-descr-container - плавно уменьшил высоту с задержкой.

Делаю так:

.product .vm-product-descr-container {
height:60px!important;
transition: all 0.3s linear 0.3s;}

.product:hover .vm-product-descr-container {
height:100%!important;
transition: all 0.3s  linear 0;}


.product .addtocart-area {
opacity:0;
 transition: all 0.3s  linear 0;}

.product:hover .addtocart-area {
opacity:1;
transition: all 0.3s linear 0.3s;}


.vm-product-descr-container - изменяет высоту с задержкой и при наведении и при потере фокуса.
.addtocart-area - появляется плавно без нужно задержки, а исчезает мгновенно и тоже без задержки.

Что я не так делаю?

Мой кривой пример в действии тут: viktoryatex.ru (при наведении на товар).
  • Вопрос задан
  • 194 просмотра
Подписаться 2 Простой 2 комментария
Решения вопроса 1
monochromer
@monochromer
DIVeloper
Инспектор показывает, что этот код неправильный
transition: all 0.3s linear 0;
То есть для задержки нужно явно указывать единицы измерения - 0s
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы