当元素被另一个元素掩盖时，有没有办法获得鼠标悬停事件？

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

我认为不可能，你可以在你的css中放一个z-index：

.under {
    z-index:1;
 }

然后修改你的JS：

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

<强> EDITED 错误的链接。

这是Fiddle

Answer 2

除非我错过了您的示例，否则您只需在CSS中添加z-index属性：

.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 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/