Ivseti
@Ivseti

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

Верстаю макет, дошел до момента, где при ховере появляется кнопка добавления в корзину. При чем одна должна появляться только на определенном блоке, если на него наведен курсор мыши. Я пробовал вариант jsfiddle.net/V6VWC/4 Но при наведении показывает все блоки:)) и при этом конструкция не должна смещаться если у одного блока появится дополнительный, то есть что бы высота оставалась везде одинаковой и блоки не смещались.
Пример как мне нужно при наведении:
61a9eee53ea00806644240.jpeg

Моя верстка тут: https://dk-web.site/
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
nbrylevv
@nbrylevv
Front-end разработчик
Как вариант. Поэтапно:
1. Кнопку скрываем (display: none) и позиционируем абсолютно (position: absolute)
2. Для карточки дописываем стили с тенью и фоном в псевдокласс (например, ::before) и скрываем его
3. При наведении на карточку показываем (display: block) кнопку и псевдокласс

Черновик: jsfiddle.net/wL7fz80a
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы