jQuery hover div underneath another layer

user2385136 picture user2385136 · Mar 6, 2011 · Viewed 16.6k times · Source

Is it possible to ignore all divs that are "above" the element that has hover binded to them with jQuery? For example, I have an element A that has a hover event binded to it, but there also other elements B, C, D that are "absolute positioned" above element A. So when the user's mouse moves over to element B, C, D, the hover event is no longer fired even if B, C, and D are directly above the element. Is it possible to ignore elements B C and D?

UPDATE: I'm actually trying to create a map (element A) with elements B, C, D as area labels. So for example, for a map of New York state, you will have text elements "Manhattan", "New Jersey", etc overlapping the map. This is why I need the hover to fire even if the user has his mouse over the labels.

Answer

andyb picture andyb · Mar 6, 2011

If you can use CSS3 then you can set pointer-events:none for the absolutely positioned elements, see demo here.

All modern browsers support this property - only IE9 and below and Opera Mini do not support it (at the time of writing). It also means you will not have any pointer-events for those elements which might not be exactly what you want.