Woocommerce CSS - продукт, который переполняет продукт ниже - PullRequest
Новая
       36

Woocommerce CSS - продукт, который переполняет продукт ниже

1 голос
/ 10 марта 2019

Я в замешательстве.У меня есть продукты в сетке, отображаемые как <li>, и мне нужно показать их выше при наведении курсора на элемент ниже:

Я установил высоту <li> только на 366px и overflow: hidden;, и нанаведите курсор <li> на height: auto; и overflow: initial;.

Работает хорошо, но:

enter image description here

На правой сторонеявляется продуктом на крыше <li>.Последний элемент div и кнопка по умолчанию скрыты, если установить меньшую высоту, а переполнение скрыто и отображаться при наведении.Выделенный водосточный желоб между продуктами не должен быть виден.

position: relative; для родительского элемента <ul> и position: absolute; на <li> не работает, поскольку продукт не остается на своем месте.

Мой код: 

.woocommerce ul.products li.product {
  width: 25%;
  margin: 0;
  border: 1px solid #f5f5f5;
  padding: 0 15px;
  transition: 
  color .15s ease-in-out,
  background-color .15s ease-in-out,
  border-color .15s ease-in-out,
  box-shadow .15s ease-in-out;
  float: left;
  position: relative;
  list-style: none outside;

  //cut off last div and button from description
  height: 366px;
  overflow: hidden;
}

.woocommerce ul.products li.first {
  clear: both;
}

// hover state
.woocommerce ul.products li.product:hover {
  -webkit-box-shadow: 0px 0px 20px 0px rgba(166, 166, 166, .75);
  -moz-box-shadow:    0px 0px 20px 0px rgba(166, 166, 166, .75);
  box-shadow:         0px 0px 20px 0px rgba(166, 166, 166, .75);
  height: auto;
  overflow: initial;
}

Мне нужно произвести продукт накрытия, который переливается через продукт ниже, не создавая между ними желоба:

graphic template

Я предоставлю ссылку на сайт по электронной почте.Может кто-нибудь помочь?Все еще не решено.

...