懸停在分層元素上不起作用

我在同一個位置上有相同大小的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

懸停在分層元素上不起作用

回答

相關問題