Как сделать раскрытие карточки товара при наведении?

Question

[Helping]

Здравствуйте!
1) Как сделать так, чтобы при наведении на карточку товара раскрывалась только та, на которую наводим, а не все сразу?
2) И как раскрывать её плавно, сверху вниз. Сейчас это работает криво и иногда багуется.

код: jsfiddle.net/a7r2xo43/83

Answer 1

[Андрей Гончаров]

1) Убери раскрытие на js
2) то что должно раскрыться - должно быть абсолютно спозиционировано относительно карточки своей. По умолчанию с visibility:hidden; opacity:0;
3) само раскрытие пиши по ховеру на карточку на css. Т.е. при ховере на карточку меняй стили у раскрывающегося блока на opacity: 1; visibility: visible;

Comments

[Helping]

Сделал.А как плавно выводить сверху вниз?

Сейчас это так выглядит: jsfiddle.net/a7r2xo43/88

[Андрей Гончаров]

Helping, через display:none не получится плавно.
вот так можно
jsfiddle.net/a7r2xo43/94

[Helping]

Андрей Гончаров, То, что надо! Большое спасибо!

[Андрей Гончаров]

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

[Helping]

Андрей Гончаров, Сделаю. На телефонах эта карточка вообще по другому будет выглядеть.

[Helping]

Андрей Гончаров, тут ещё небольшая проблемка образовалась...
В каталоге товары идут в несколько рядов, друг под другом и надо чтоб то ,что выезжает, было поверх нижнего товара : jsfiddle.net/a7r2xo43/97

А если у ховера z-index поднять, то будет видно как он выдвигается jsfiddle.net/a7r2xo43/101

[Андрей Гончаров]

Helping, поигрался там, основной смысл что карточку саму при ховере поднимать по z-index
jsfiddle.net/a7r2xo43/106

[Helping]

Андрей Гончаров, Работает! Спасибо ещё раз!

[Tobster]

Helping,

Сделаю. На телефонах эта карточка вообще по другому будет выглядеть.

Как будет?

[Helping]

Tobster, там ничего не будет выезжать, часть инфы будет сразу в каталоге, а остальное на странице товара.

[alex-1917]

Tobster, для телефонов анимации надо по минимуму делать, тем более такие малополезные анимации, как сокрытие информации. Это все, что надо знать о мобильном шаблоне.

[Tobster]

alex-1917,

для телефонов анимации надо по минимуму делать

Изза чего?

[alex-1917]

Tobster, там для этого есть свайп - лента товаров просто скролится вниз-вниз-вниз, нет проблемы с местом, которое надо экономить на декстопе...
по вашему варианту - придется комбинировать свайп+тап. ЗАЧЕМ? если тоже самое можно будет получить одним свайпом?
ну сами найдите что-то подобное криворукое, которое и на мобильниках будет требовать тапа и поймете как это дико неудобно #диконапример