悬停在分层元素上不起作用

我在同一个位置上有相同大小的div。但是他们没有背景，所以你没有看到元素在不同的容器中。我现在遇到的问题是，悬停事件仅在最后一个容器中的元素上触发，因为它被分层放在其他容器的顶部。悬停在分层元素上不起作用

#main { 
 
    background: yellow; 
 
    width: 300px; 
 
    height: 300px; 
 
    position: absolute; 
 
    left: 30px; 
 
    top: 30px; 
 
    z-index: 1; 
 
} 
 

 
.out { 
 
    width: 300px; 
 
    height: 300px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    background: none; 
 
    z-index: 5; 
 
} 
 

 
.in { 
 
    position: absolute; 
 
    width: 40px; 
 
    height: 40px; 
 
    z-index: 10; 
 
    opacity: 0.5; 
 
} 
 

 
.out:nth-of-type(1) .in { 
 
    top: 40px; 
 
    left: 40px; 
 
    background: green; 
 
} 
 

 
.out:nth-of-type(2) .in { 
 
    top: 120px; 
 
    left: 120px; 
 
    background: red; 
 
} 
 

 
.out:nth-of-type(3) .in { 
 
    top: 200px; 
 
    left: 200px; 
 
    background: blue; 
 
} 
 

 
.in:hover { 
 
    opacity: 1.0; 
 
}

<div id="main"> 
 
    <div class="out"> 
 
    <div class="in">DIV 1</div> 
 
    </div> 
 
    <div class="out"> 
 
    <div class="in">DIV 2</div> 
 
    </div> 
 
    <div class="out"> 
 
    <div class="in">DIV 3</div> 
 
    </div> 
 
</div>

是否有可能迫使悬停事件还是我必须把所有的元素融入同一容器（这将是可能的，但不是说好原来的网站上）？

我知道解释不是最好的，但我认为你应该明白这个代码。 JSFiddle

来源

2017-02-24 CheckerBrazze

我加入pointer-events: none;到.out和pointer-events: auto;到.in固定它。 HTH！

来源

2017-02-24 15:52:47 nncho

我会把它们放在同一个容器中，如果可以的话就像你说的那样。对不起，我不能只是评论说。

来源

2017-02-24 15:48:29

您可以将所有这些放入同一父元素（.out）中并使用:nth-child()选择器来获取不同的颜色和位置。然后悬停工作：

#main { 
 
    background: yellow; 
 
    width: 300px; 
 
    height: 300px; 
 
    position: absolute; 
 
    left: 30px; 
 
    top: 30px; 
 
    z-index: 1; 
 
} 
 

 
.out { 
 
    width: 300px; 
 
    height: 300px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    background: none; 
 
    z-index: 5; 
 
} 
 

 
.in { 
 
    position: absolute; 
 
    width: 40px; 
 
    height: 40px; 
 
    z-index: 10; 
 
    opacity: 0.5; 
 
} 
 

 
.out .in:nth-child(1) { 
 
    top: 40px; 
 
    left: 40px; 
 
    background: green; 
 
} 
 

 
.out .in:nth-child(2) { 
 
    top: 120px; 
 
    left: 120px; 
 
    background: red; 
 
} 
 

 
.out .in:nth-child(3){ 
 
    top: 200px; 
 
    left: 200px; 
 
    background: blue; 
 
} 
 

 
.in:hover { 
 
    opacity: 1.0; 
 
}

<div id="main"> 
 
    <div class="out"> 
 
    <div class="in">DIV 1</div> 
 
    <div class="in">DIV 2</div> 
 
    <div class="in">DIV 3</div> 
 
    </div> 
 
</div>

来源

2017-02-24 15:52:00 Johannes

悬停在分层元素上不起作用

回答

相关问题