Passing mouse clicks through an overlaying element <div>

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

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

down to underlaying elements (paragraphs, images, links, etc)?

Or worded another way:

Is there any way of creating a purely aesthetic overlay/layer in HTML, CSS and/or JavaScript?



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)


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


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.


This can be solved using CSS:

div { pointer-events:none; }

Supported by IE 11+, Chrome, Firefox, Safari and Opera.

More details:


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.