Почему исчезают элементы при hover?

Question

[Максим Герасименко]

На сайте kookyshops.com на Главной странице есть блок Buy it now. В этом блоке есть карточки товаров. При наведении на товар срабатывает hover CSS. Но при срабатывании hover исчезают часть карточек товаров.



На скрине видно, если навести курсор мыши на карточку товара которая отмечена стрелкой, то часть карточек товара исчезает.

Почему так и как это исправить?

Comments

[WapSter]

Тут решение только одно - научиться верстать. Ибо без знаний верстки ты не можешь называть себя веб девелопером)

[Максим Герасименко]

Если сделать так, т.е. при ховере не менять высоту, исчезают карточки товара при наведении курсора мыши на более правые карточки.

Answer 1

[Роман Дворянов]

В общем у вас там какие-то приколы с высотой этих карточек и судя по всему следующий элемент, после наведенного помещается в том же ряду под предыдущим, поэтому карточки смещаются, а не исчезают

Вот это подвинет ваши элементы и сделает съезжаемыми те что пониже. Как по мне, так там всю сетку нужно переделывать

.mmm:hover {
      box-shadow: 0 0 8px rgba(0,0,0,0.2);
      height: 425px !important;
  }

А вот такой вариант может и сработать

.mmm {
    height: auto !important;
}

.mmm:hover {
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    height: auto !important;
}

И не злоупотребляйте с импортантами и медиазапросами, пожалуйста, у вас там специфичность css зашкаливает

Answer 2

[alekseyHunter]

Код в студию.
И почему блок с ценой плывет при изменении размеров экрана?

Answer 3

[Maxim Kirshin]

У тебя при ховере высота у карточки меняется на другую. Карточки не исчезают, а съезжают на другую строку.

Решение: не менять высоту при ховере