javascript - 悬停效果不会触发底层元素？

Question

我有重叠的元素(确切地说是图像)，如果悬停在上面，我需要它们全部激活各自的悬停效果，即使它们不在顶部也是如此。我觉得这应该很简单。我错过了什么吗？

这是一个 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>

Answer 1

你的说明和你的例子有点矛盾:

I've got overlapping elements ... I need them all to activate their respective hover effects if hovered over...

和

I need red's hover effect to fire if touched even if that space is covered by green and blue.

你是否需要每个元素悬停效果在悬停时激活，或者你是否需要底部元素的悬停激活，即使它们上面有其他元素？

如果是前者，当您将鼠标悬停在三者共有的大区域上时，您是否希望激活红色、绿色和蓝色的效果？这有点棘手。

如果是后者，您可以在顶部的重叠元素上使用 pointer-events: none 来忽略它们的悬停事件。请注意，它没有很好的浏览器支持:http://caniuse.com/pointer-events

我已经更新了你的 JSFiddle 作为例子:http://jsfiddle.net/yFD2E/2/

这是否解决了您的问题？