Make an element visible to the user but invisible to events

Question

I'm not quite sure how to describe what I'm looking to do, but I'll do my best.

At the moment I have a parent <div>, with absolutely positioned child <div>s within it, and I'm tracking the mouse pointer location coordinates relative to the element your mouse is over.

At the moment, when I mouse over my child <div>s, I get the mouse location relative to them, but I want the coordinates to be relative the the parent <div> even when mousing over the child elements.

So I basically want the child elements to be visible, but transparent to the mousemove, so I want the mousemove to go straight through to the parent element.

How would I do this? Do I maybe need to somehow make the parent <div> be in the foreground but still have the child <div>s show through? or make a transparent <div> overlay just to get the mouse coordinates?

Answer 1

You can make an element "transparent" to events by setting its pointer-events CSS property to none. For example:

<div><!--container-->
<div style="pointer-events: none"><!--inner div; will not respond to mouse clicks-->
</div>
</div>