Passing mouse clicks through an overlaying element <div>

Question

Is it possible to pass mouse clicks through an overlaying element: -

<div style="z-index: 100; background: url('../images/rain.24.png'); width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0;">&nbsp;</div>

...pass mouse clicks beneath it to underlaying elements (e.g. a web page with images, links, etc)?

Thinking of another way to word this... Is there any way of creating a purely aesthetic overlay/layer in HTML(5), CSS(3) and/or JavaScript/jQuery?

Thanks in advance, and sorry if this question isn't too clear.

Peace.

Answer 1

You could try to retrieve the mouse coordinates in your click event and then retrieve an element by hiding your overlay, use document.elementFromPoint(x, y) and then redisplay the overlay.

See this SO question for more info about elementFromPoint:

How do I find the DOM node that is at a given (X,Y) position? (Hit test)

Answer 2

You could assign a mouse click event to the covering div, then iterate through all elements that you know might be underneath, inspecting their position, width, and height to see if that location of the mouse click was within their borders, and if it was, call their onclick event.

To make the subset of possible elements smaller, you could give clickable elements that might be under the div, a special class.

Answer 3

I see you are using "rain.24.png" is the overlay animated? As in you are repositioning the images to simulate rain? If this is the case, then it might be best to stop/hide the animated on mousedown and then get the activate your function on the underlying elements using mouseup.

If that isn't the case, then use Vincent's answer to get the element, then call the associated function or use trigger to simulate the click