懸停效果不會觸發底層元素？

我有重疊的元素（準確的說是圖像），我需要它們全部激活它們各自的懸停效果，如果它們懸停在上面，即使它們不在最上面。我覺得這應該是非常簡單的。我錯過了什麼嗎？懸停效果不會觸發底層元素？

這是jsFiddle。即使該空間被綠色和藍色覆蓋，我也需要紅色的懸停效果才能觸發。

#div1, #div2, #div3 { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
#div1 { 
 
    background-color: red; 
 
} 
 
#div2 { 
 
    background-color: green; 
 
    left: 25px; 
 
    top: 25px; 
 
} 
 
#div3 { 
 
    background-color:blue; 
 
    left: 50px; 
 
    top: 50px; 
 
}

<div id="div1" onmouseover="alert('Red Div moused over');"></div> 
 
<div id="div2"></div> 
 
<div id="div3"></div>

來源

2013-05-02 Mr. Lavalamp

懸停總是應用於頂部的元素。如果您需要更準確的答案，請發佈您的代碼並向我們解釋您準備做什麼。 – Mysteryos 2013-05-02 06:32:58

在JSFiddle中發佈您的代碼...然後只有我們知道您嘗試了什麼。 – karthik 2013-05-02 06:34:29

是您類似的問題？ http://jsfiddle.net/Frfbf/ – lukeocom 2013-05-02 06:41:10

正如Mysteryos提到的，只有最頂層的元素將獲得懸停事件。這可以在這裏看到這個小提琴 - http://jsfiddle.net/Frfbf/

您可以添加一個覆蓋div與紅色框相同的尺寸，但坐在其他人之上。然後將懸停功能應用於它，而不是紅框本身。看到這裏http://jsfiddle.net/yFD2E/1/

#container { 
    position:absolute; 
    width:100px; 
    height:100px; 
    border:2px solid #0f0; 
    overflow:hidden; 
    z-index:2; 
} 
#container:hover{border-color:#f00;} 
#container div{z-index:1;}

UPDATE： jQuery的解決方案/起點 - http://jsfiddle.net/yFD2E/6/

來源

2013-05-02 06:43:34 lukeocom

換句話說，有沒有解決方案？ – 2013-05-02 06:47:29

用一個粗略的解決方案更新了我的答案 – lukeocom 2013-05-02 06:49:15

我確定你可以想出一個腳本來爲你做這個。檢查鼠標是否位於屏幕上方，然後突出顯示紅色框的內容... – lukeocom 2013-05-02 06:52:15

您的指示，你的例子是有點矛盾：

我有重疊的元素...我需要他們全部激活他們各自的懸停效果，如果徘徊在...

和

我需要紅色的懸停效果才能觸發，即使該空間被綠色和藍色覆蓋也不會觸動。

您是否需要每個元素懸停效果才能在盤旋時激活，或者您是否需要底部元素的懸停才能激活，即使其上還有其他元素？

如果是前者，當你將鼠標懸停在三個共同的大面積上時，是否需要紅色，綠色和藍色的效果來激活？這有點棘手。

如果是後者，則可以在頂部的重疊元素上使用pointer-events: none以忽略其懸停事件。需要注意的是它不具有很大的瀏覽器支持：http://caniuse.com/pointer-events

我已經更新了你的jsfiddle爲例：http://jsfiddle.net/yFD2E/2/

這是否解決問題了嗎？

來源

2013-05-02 06:54:14 adnrw

懸停效果不會觸發底層元素？

回答

相關問題