<分区>
我有一个图片库，每张图片的右上角都有一个 div。我想在单击该 div 时触发一个事件。但是，当图像是透明的 (opacity = 0.1) 时，似乎单击 div 不会触发事件，即使在图像不透明时它也能正常工作。是什么原因造成的，我如何确保事件处理程序仍然被触发？
标签 javascript html css
<分区>
我有一个图片库，每张图片的右上角都有一个 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>关于javascript - 单击透明图像上的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34628068/