使图像下的按钮可点击答案

【问题标题】：Make button under image clickable使图像下的按钮可点击
【发布时间】：2021-09-17 18:18:10
【问题描述】：

我正在尝试编写一个带有图像的小“卡片”，当您将鼠标悬停在该卡片上时，它会使图像淡出并显示一个我试图使其可点击的按钮。问题是该按钮无法单击，因为它位于图像下方，当您单击它时，它会注册为对图像的单击。我知道我可以做到，这样用户就可以单击图像，但这在移动设备上效果不佳，因为您无法悬停而不单击。

这是我的 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 ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.card img:hover {
  opacity: 0;
}

<div class="card" 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" style="height: 172px;">
  </div>
  <div class="card-body">
    <button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button">Manage server</button>
  </div>
</div>

【问题讨论】：

“它注册为点击按钮”我想你的意思是点击图片而不是按钮
@j08691 哦，是的！对于那个很抱歉！是一个错字。

标签： javascript html css image

【解决方案1】：

我看到的解决方案可能是 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 ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

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

<div class="card" 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" style="height: 172px"></div>
  <div class="card-body">
    <button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button">
          Manage server
        </button>
  </div>
</div>

【讨论】：

非常感谢！ :)