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

问题描述

我有重叠的元素（图像，更精确），我需要他们都激活他们各自的悬停效果，如果悬停在上面，即使他们不在上面。我觉得这应该很简单。我错过了什么？

这里是一个。

 ＃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>  

解决方案

Mystery提到，只有最顶层的元素才会收到悬停事件。这可以在这个小提琴中看到 -

您可以添加与您的红色框相同尺寸，但位于其他尺寸之上的重叠式div。然后应用你的悬停功能，而不是红色框本身。在此处查看

  #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;} 
  pre> 
 
 
  UPDATE： jquery解决方案/起点 -   
 
I have overlapping elements (images, to be precise), and I need them all to activate their respective hover effects if hovered over, even if they are not on top.  I feel like this should be pretty straightforward.  Am I missing something?

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



#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>
 解决方案 
As Mysteryos mentioned, only the top most element will receive the hover event. This can be seen here in this fiddle - http://jsfiddle.net/Frfbf/
You can add an overlay div that is the same dimensions as your red box, but sits above the others. Then apply your hover functions to it, rather than the red box itself. seen here 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;}
UPDATE: jquery solution/starting point - http://jsfiddle.net/yFD2E/6/
                        
这篇关于悬停效果不会触发底层元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！