Hover effect won't trigger underlying elements?

Question

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>

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, May 02 '13 at 06:32
post your code in JSFiddle... Then only we know what you tried. — Karthi Keyan, May 02 '13 at 06:34

score 4 · Answer 1 · answered May 02 '13 at 06:54

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?

pointer-events: none was a life saver here – Nick Vanderhoven Oct 02 '22 at 13:29 — Nick Vanderhoven, Oct 02 '22 at 13:29

lukeocom · Accepted Answer · 2013-05-02T07:40:31.483

3

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/

edited May 02 '13 at 07:40

answered May 02 '13 at 06:43

lukeocom

3,243
3
18
30

In other words there's literally no solution? – Mr. Lavalamp May 02 '13 at 06:47
Im sure you could come up with a script to do this for you. Something that checks if the mouse is over that part of the screen, and then highlight the red box... – lukeocom May 02 '13 at 06:52
I suppose a quick google would have told me how to check pointer position. I need sleep. Thanks for your help. – Mr. Lavalamp May 02 '13 at 06:53
Ive written a quick (and dirty) script using jquery that seems to do the trick, and should be a good starting point for you. http://jsfiddle.net/yFD2E/6/ – lukeocom May 02 '13 at 07:13

Hover effect won't trigger underlying elements?

2 Answers2

Linked