在透明图像上单击div

steven 发表于 Dev

史蒂文

我在每个图片的右上角都有一个带div的图片库。我想在单击该div时触发一个事件。但是，当图像是透明的（opacity = 0.1）时，即使单击div似乎也不会触发事件，即使在图像不透明的情况下也可以正常工作。是什么引起的，如何确保事件处理程序仍被触发？

亚当·阿扎德|

尝试添加z-index到.hover

.hover {
   z-index:9;
}

document.getElementById('hover1').onclick = testClick;
document.getElementById('hover2').onclick = testClick;
document.getElementById('hover3').onclick = testClick;

function testClick(event) {
	// this works for hover2 and hover3 but not hover3
  document.getElementById('log').innerText = event.currentTarget.id;
}

.imgHover {
  position: relative;
  display: inline-block;
}

.hover {
  position: absolute;
  right: 0;
  top: 0;
  background-color: white;
  z-index:9;
}

.transparent {
  opacity: 0.1;
}

<div class="imgHover">
  <div id="hover1" class="hover">Hide</div>
  <img id="img1" src="http://ddragon.leagueoflegends.com/cdn/5.24.2/img/champion/Aatrox.png" alt="" class="transparent" />
</div>
<div class="imgHover">
  <div id="hover2" class="hover">Hide</div>
  <img id="img2" src="http://ddragon.leagueoflegends.com/cdn/5.24.2/img/champion/Ahri.png" alt="" />
</div>
<div class="imgHover">
  <div id="hover3" class="hover">Hide</div>
  <img id="img3" src="http://ddragon.leagueoflegends.com/cdn/5.24.2/img/champion/Akali.png" alt="" />
</div>
<div id="log">output:</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。