Make an element visible to the user but invisible to events
- by Acorn
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 forground but still have the child <div>s show through? or make a transparent <div> overlay just to get the mouse coordinates?
Here's a link to the page I'm experimenting on: http://acorn.host22.com/mouse.html