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

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

我有重叠的元素......我需要它们才能激活各自的悬停效果，如果它们悬停在......

和

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

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

如果是前者，当你将鼠标悬停在三个共同的大区域上时，你想要激活红色，绿色和蓝色的效果吗？这有点棘手。

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

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

这能解决您的问题吗？

Answer 2

正如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/

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

2 个答案: