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

时间:2013-05-02 06:31:31

标签: javascript jquery html css hover

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

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

2 个答案:

答案 0 :(得分:3)

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

  

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

  

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

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

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

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

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

这能解决您的问题吗?

答案 1 :(得分: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/