Question

How can I get the hover on an element which is behind another ? (In this case i’ve got two images)
I’ve searched quite a lot and found some people having the same problem but the solutions they got were just other ways to do what they wanted to do, and not a way of really achieving this “background hover”.
Thank you
edit : Thanks a lot, I tried pointer-events: none; as you said and it works, but not in IE and that’s a major problem.
Guess I’ll have to work around the problem by building the solution in another way :

I work on a grid which is built with lots of little square images(those have to be images).
With the cursor i move another image on the top of it, which has the size of 4 squares and represents a selector for 4 elements of the grid.
The image has to move on the grid’s elements, so this isnt a simple cursor image thing.

At the moment I use something like hover/mouseenter on the grid’s elements which causes the selector to move to the grid’s element position. But then when it moves, the image on the top is the selector and not the grid, so the hover doesnt work anymore, it does only if I move the mouse out of the selector.

Hope you can understand ^^

Answer 1

Add pointer-events: none CSS to the top element.

See demo