Двойной ховер в каталоге товаров

Question

При ховере на карточку товара подсвечиваются линия и две кнопки (это первый ховер). Внутри этого ховера нужен второй, где при наведении на кнопку - она окрасится в другой цвет:

.catalog-items {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.product-item:hover {
  border-bottom: 2px solid #006667;
}

.product-item img {
  display: block;
  width: 100%;
}

.product-list {
  background: #fafafa;
  padding: 15px 0;
}

.product-list h3 {
  font-size: 18px;
  font-weight: 400;
  color: #393939;
  margin: 0 0 10px 0;
}

.price {
  font-size: 16px;
  color: #006667;
  display: block;
  margin-bottom: 12px;
}

.button {
  text-decoration: none;
  display: inline-block;
  padding: 0 12px;
  background: #cccccc;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 28px;
  transition: 0.3s ease-in;
}

.details {
  text-decoration: none;
  display: inline-block;
  padding: 0 12px;
  background: #cccccc;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 28px;
  transition: 0.3s ease-in;
}

.product-item:hover .button {
  background: #31abac;
}

.product-item:hover .details {
  background: #31abac;
}

<div class="catalog-items">
  <div class="product-item">
    <img src="/images/knife_card.png" />
    <div class="product-list">
      <h3>Опричник</h3>
      <span class="price">₽ 6000</span>
      <a href="#" class="details">подробнее</a>
      <a href="#" class="button">В корзину</a>
    </div>
  </div>
</div>

Answer 1

Последние две строчки в CSS:

.catalog-items {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.product-item:hover { border-bottom: 2px solid #006667; }

.product-item img {
  display: block;
  width: 100%;
}

.product-list {
  background: #fafafa;
  padding: 15px 0;
}

.product-list h3 {
  font-size: 18px;
  font-weight: 400;
  color: #393939;
  margin: 0 0 10px 0;
}

.price {
  font-size: 16px;
  color: #006667;
  display: block;
  margin-bottom: 12px;
}

.button {
  text-decoration: none;
  display: inline-block;
  padding: 0 12px;
  background: #cccccc;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 28px;
  transition: 0.3s ease-in;
}

.details {
  text-decoration: none;
  display: inline-block;
  padding: 0 12px;
  background: #cccccc;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 28px;
  transition: 0.3s ease-in;
}
/* Цвет кнопок при наведении на блок */
.product-item:hover .button { background: #31abac; }
.product-item:hover .details { background: #31abac; }
/* Цвет кнопок при наведении на сами кнопки */
.product-item .button:hover { background: #f00; }
.product-item .details:hover { background: #f00; }

<div class="catalog-items">
  <div class="product-item">
    <img src="/images/knife_card.png" />
    <div class="product-list">
      <h3>Опричник</h3>
      <span class="price">₽ 6000</span>
      <a href="#" class="details">подробнее</a>
      <a href="#" class="button">В корзину</a>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Двойной ховер в каталоге товаров

Ответы (1 шт):