Как использовать класс stretched-link bootstrap и сохранить поведение hover на самой карте?

Question

У меня есть bootstrap карточка товара. Я хочу получить доступ к информации о продукте, нажав на саму карту или нажав на название продукта. Я нашел класс stretched-link Bootstrap и добавил это. Теперь проблема в том, что я потерял все :hover поведения на разных элементах карты.

Моя карта:

<div class="col mb-4">
    <div class="product-card">
        <img src="../asset/images/golden-chain-purse.jpg" class="card-img-top product-img" alt="...">
        <p class="product-price">{{ product.price }}
            €
        </p>
        <a class="etsy-button" href="{{ product.etsyLink }}" target="_blank">Buy on Etsy &copy</a>
        <a class="product-details-link stretched-link" href="{{ path('product_details', {product_id: product.id }) }}"></a>
    </div>
    <a class="product-details-link" href="{{ path('product_details', {product_id: product.id }) }}">
        <h5 class="card-title">{{ product.name }}</h5>
    </a>
</div>

разные: зависание моей карты

.product-card:hover img {
    filter: blur(3px);
}

.product-card:hover :not(img) {
    opacity: 1;
    transition: .5s;
}

.etsy-button:hover {
    background-color: rgba(238, 182, 191, 0.637);
    padding: 0.4em 0.6em;
    text-decoration: none;
    margin-top: 0.3em;
}

.product-details-link:hover {
    text-decoration: none;
}

Answer 1

Это проблема z-index, вы можете решить ее с помощью

.<that_class_that_not_show_your_hover> {
    z-index: 2;
    position: relative;
}

ПРИМЕР

.etsy-button {
    z-index: 2;
    position: relative;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style>
  .product-card:hover img {
    filter: blur(3px);
  }
  
  .product-card:hover :not(img) {
    opacity: 1;
    transition: .5s;
  }
  
  .etsy-button:hover {
    background-color: rgba(238, 182, 191, 0.637);
    padding: 0.4em 0.6em;
    text-decoration: none;
    margin-top: 0.3em;
  }
  
  .product-details-link:hover {
    text-decoration: none;
  }
  
  .etsy-button {
    z-index: 2;
    position: relative;
  }
</style>


<div class="col mb-4">
  <div class="product-card">
    <img src="https://i.picsum.photos/id/381/200/300.jpg" class="card-img-top product-img" alt="...">
    <p class="product-price">{{ product.price }} €
    </p>
    <a class="etsy-button" href="https://stackoverflow.com" target="_blank">Buy on Etsy &copy</a>
    <a class="product-details-link stretched-link" href="https://google.com"></a>
  </div>
  <a class="product-details-link" href="{{ path('product_details', {product_id: product.id }) }}">
    <h5 class="card-title">{{ product.name }}</h5>
  </a>
</div>