单击透明图像上的div

Question

JSFiddle here

我有一个图像库，每个图像的右上角都有一个div。我希望在单击该div时触发事件。但是，当图像是透明的（Template.reqform.events({ "click #addjob": function (event, template) { event.preventDefault(); Session.set ('reqformtask',!Session.get ('reqformtask')); } }); ）时，似乎单击div不会触发事件，即使它在图像不透明时工作正常。造成这种情况的原因是什么，以及如何确保仍然触发事件处理程序？

Answer 1

尝试将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>

Answer 2

请将z-index: 99;添加到悬停类。 这是updated JSFiddle。

Answer 3

将此添加到您的CSS：

.imgHover div{
  z-index:5;
}

Here is the JSFiddle demo