javascript - Passing mouse clicks through an overlaying element <div>

Question

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?

Answer 1

This can be solved using CSS:

div { pointer-events:none; }

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

More details: https://developer.mozilla.org/en-US/docs/CSS/pointer-events