當元素被另一個元素覆蓋時，有沒有辦法獲得一個mouseover事件？

Question

不計算元素的位置，然後發射自己的「事件」。

original fiddle (can be fixed with z-index)

better fiddle (a situation where z-index can't work)

<div class='under'></div> 
<div class='over'></div> 

.over { 
    display:inline-block; 
    position:absolute; 
    height:100px; 
    width:100px; 
    background: rgba(0, 255, 0, .3); 
} 

.under { 
    display:inline-block; 
    position:absolute; 
    height:26px; 
    width:26px; 
    top:37px; 
    left:37px; 
    background:rgba(0, 0, 255, 1); 
} 

Answer 1

除非我已經錯過了你的榜樣的時候，你可以只添加一個Z-index屬性來你的CSS：

.over 
{ 
    display:inline-block; 
    position:absolute; 
    height:100px; 
    width:100px; 
    background: rgba(0, 255, 0, .3); 
    z-index:1; 
} 

.under 
{ 
    display:inline-block; 
    position:absolute; 
    height:26px; 
    width:26px; 
    top:37px; 
    left:37px; 
    background:rgba(0, 0, 255, 1); 
    z-index:2; 
} 

Answer 2

我不認爲這是可能的，你可以把一個z-index的在你的CSS：

.under { 
    z-index:1; 
} 

，然後修改你的JS：

under.on("mouseover", function() { 
          blue.html("Y"); 
          green.html("Y"); 
}); 

EDITED 錯誤的鏈接。

這裏的Fiddle

Answer 3

添加pointer-events:none;您over DIV：

.over { 
    display:inline-block; 
    position:absolute; 
    height:100px; 
    width:100px; 
    background: rgba(0, 255, 0, .3); 
    pointer-events:none; 
} 

DEMO：http://jsfiddle.net/ckaPU/1/