使影像下的按鈕可以點擊 -有解無憂

我試圖撰寫一個小 "卡片 "的代碼，其中有一張圖片，當你懸停在上面時，它會淡化圖片并顯示一個按鈕，我試圖讓它可以點擊。問題是，這個按鈕不能被點擊，因為它在影像下面，當你點擊它時，它被登記為對影像的一次點擊。我知道我可以讓用戶直接點擊圖片，但這在移動設備上效果并不好，因為你不能在不點擊的情況下懸停。

以下是我的HTML。(注意：這是我的實際卡片的基本版本）

。

.center {
  text-align: center;
}

img.rounded-corners {
  border-radius: 30px;
  background-color: rgba（29, 30, 40, 1）。
}

.btn btn-primary {
  position: absolute;
  top: 50%;
}

.card {
  //background: #1D1E28;
  background-color: transparent;
  position: relative;
  height: 500px;
  width: 500px;
  margin: 0 auto;
}

.card img {
  position: absolute;
  left: 0;
  opacity: 1;
  -webkit-transition: opacity 1s easy-in-out;
  -moz-transition: opacity 1seasy-in-out;
  -o-transition: opacity 1sease-in-out;
  transition: opacity 1sease-in-out;
}

.card img:hover {
  opacity: 0;
}

< div class="card"/span> style="height: 18rem; width: 18rem;">。
  <img src="https://icon-library.com/images/black-discord-icon/black-discord-icon-19. jpg" class="card-img-top rounded-corners guildimg" alt=" 。
  <div class="card-body"/span> style="height: 172px;">
  </div>/span>
  <div class="card-body"> 
    < button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button"> 管理服務器</button> 
  </div>/span>
</div>/span>

uj5u.com熱心網友回復：

我看到的解決方案可能是，如果hover處理程式將在.card:hover img而不是.card img:hover。并且用pointer-events: none;

洗掉影像事件的形式。

.card：hover img {
  opacity: 0;
  pointer-events: none;

顯示代碼片段

document.querySelector('button') 。 addEventListener('click', ev =>  {
  console.log（'click'）。
  ev.target.textContent = 'cliked';
});

.center {
  text-align: center;
}

img.rounded-corners {
  border-radius: 30px;
  background-color: rgba（29, 30, 40, 1）。
}

.btn btn-primary {
  position: absolute;
  top: 50%;
}

.card {
  background: #1d1e28;
  background-color: transparent;
  position: relative;
  height: 500px;
  width: 500px;
  margin: 0 auto;
}

.card img {
  position: absolute;
  left: 0;
  opacity: 1;
  -webkit-transition: opacity 1s easy-in-out;
  -moz-transition: opacity 1seasy-in-out;
  -o-transition: opacity 1sease-in-out;
  transition: opacity 1sease-in-out;
}

.card:hover img {
  opacity: 0;
  pointer-events: none;
}

< div class="card"/span> style="height: 18rem; width: 18rem">
  <img src="https://icon-library.com/images/black-discord-icon/black-discord-icon-19. jpg" class="card-img-top rounded-corners guildimg" alt="..." /> 
  <div class="card-body"/span> style="height: 172px"></div>>
  <div class="card-body">/span>
    < button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button"> 
          管理服務器
        </button>管理服務器
  </div>/span>
</div>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/326135.html

標籤：

上一篇：我使用HTML和Javascript創建了一個表單，我想根據選擇的數量來顯示特定的對話。但警報在這里不起作用

下一篇：來自背景關系案例類的隱含值