Нажатие на DIV над прозрачным изображением

Question

JSFiddle here

У меня есть галерея изображений с DIV в правом верхнем углу каждого изображения. Я хочу вызвать событие, когда этот div будет нажат. Однако, когда изображение прозрачно (opacity = 0.1) кажется, что щелчок на 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) { 
 
\t // 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

Добавьте это в CSS:

.imgHover div{ 
    z-index:5; 
} 

Here is the JSFiddle demo

Answer 3

Пожалуйста, добавьте z-index: 99; в класс зависания. Адрес updated JSFiddle.