На мобильной версии сайта сразу нажимается кнопка

Question

подскажите пожалуйста как побороть недуг. Сверстал карточку для магазина, при наведении указателя, фон затемняется и появляется три кнопки, но в мобильной версии если нажать на то место где скрыта кнопка, она сразу активируется, как сделать так чтобы при первом тапе появлялись кнопки, а при втором активировалась кнопка

.product-item {
  position: relative;
  background-color: #252525;
  box-shadow: #000000 0 0 10px 1px;
}

@media screen and (min-width: 768px) {
  .product-item .stations-button {
    display: none;
  }
}

.product-item:hover {
  box-shadow: #aaa 0 0 10px 1px;
}

.product-item:hover .buttons-item {
  opacity: 1;
}

.product-item:hover .stations-item {
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .product-item .product-item-logo {
    width: 80%;
  }
}

.buttons-item {
  opacity: 0;
  transition: opacity 1s;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(#000000bd, #000000b9);
  padding: 50px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.buttons-item a {
  margin-bottom: 30px;
  background-color: #252424;
  box-shadow: #aaa 0 0 5px 1px;
}

<!-- Product -->
<div class="col-lg-3 col-sm-6 my-3">
  <div class="col-12 text-center h-100 product-item invertors">
    <div class="side">
      <div class="row h-100">
        <div class="col-12 p-0 mb-3">
          <a href="solaredge.html">
            <img src="images/invertors/solaredge/solaredgebg3.webp" class="img-fluid" alt="solaredge invertor">
          </a>
        </div>
        <div class="col-12 mb-3">
          <a href="solaredge.html"><img class="product-item-logo" src="images/invertors/solaredge/SolarEdge_logo.webp"></a>
        </div>
        <div class="col-12 mb-3 align-self-end stations-button">
          <button class="btn btn-outline-dark">Детальніше<i class="fas fa-arrow-right ml-4 home-icon"></i></button>
        </div>
      </div>
    </div>
    <div class="buttons-item">
      <div class="d-flex flex-column button-block">
        <a class="btn btn-outline-dark" href="solaredge-invertors.html">Інвертори</a>
        <a class="btn btn-outline-dark" href="solaredge-optimizators.html">Оптимізатори</a>
      </div>
    </div>
  </div>
</div>
<!-- Product -->

Answer 1

когда вы добавляете opacity,это просто означает прозрачность ,тоесть opacity 0 значит его не видно, но на самом деле он есть ,если вы хотите ,чтобы не реагировал мышь при клике ,вы должны удалить его, так сказать закрыть через display ,там где написанно opacity 0 уберите ,это и на место ставьте display:none а когда будет появляться ставьте display:block

Answer 2

display: none; не анимируется и не реагирует на transition, совеетую использовать opacity, visiblity, transition вместе чтобы точно работало плавное появление элементов

БЛОГ НА HUSL

На мобильной версии сайта сразу нажимается кнопка

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