Hover effect won't trigger underlying elements?

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>

Answers


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/


Your instructions and your example are a little contradictory:

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

and

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

Do you need each elements hover effect to activate when hovered, or do you need the bottom element's hover to activate even if there are other elements on top of them?

If it's the former, do you want red, green and blue's effects to activate when you hover over the large area common to all three? That's a bit more tricky.

If it's the latter, you can use pointer-events: none on the overlapping elements that are on top to ignore their hover events. Note that it doesn't have great browser support: http://caniuse.com/pointer-events

I've updated your JSFiddle as an example: http://jsfiddle.net/yFD2E/2/

Does that solve your problem?


Need Your Help

White background appears on header while scrolling

jquery css menu header scroll

There is a white background which stretches to the width of the screen when the page is scrolled to the end. http://freshpotsolutions.com/saudisurgeons.com/test11/

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.