2

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

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

4

2 回答 2

3

正如 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;}

更新： jQuery 解决方案/起点 - http://jsfiddle.net/yFD2E/6/

于 2013-05-02T06:43:34.733 回答
3

你的指示和你的例子有点矛盾：

我有重叠的元素......如果悬停在上面，我需要它们全部激活它们各自的悬停效果......

和

即使该空间被绿色和蓝色覆盖，我也需要红色的悬停效果才能触发。

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

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

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

我已经更新了您的 JSFiddle 作为示例：http: //jsfiddle.net/yFD2E/2/

这能解决你的问题吗？

于 2013-05-02T06:54:14.820 回答