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>

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>

• javascript
• jquery
• html
• css
• hover

• 2 Hover is always applied to the element on top. If you need a more precise answer, post your code and explain us what you are trying to do exactly. – Mysteryos Commented May 2, 2013 at 6:32
• post your code in JSFiddle... Then only we know what you tried. – Karthi Keyan Commented May 2, 2013 at 6:34
• is your issue similar to this? jsfiddle/Frfbf – lukeo Commented May 2, 2013 at 6:41

2 Answers 2

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 mon 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./pointer-events

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

Does that solve your problem?

As Mysteryos mentioned, only the top most element will receive the hover event. This can be seen here in this fiddle - http://jsfiddle/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/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/yFD2E/6/