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

Question

无需计算元素的位置，然后触发您自己的“事件”。

原始小提琴（可以用 z-index 修复）

更好的小提琴（z-index 无法工作的情况）

<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"); 
 });

编辑 错误的链接。

这是小提琴

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;到您的overdiv：

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

演示：http: //jsfiddle.net/ckaPU/1/