Menu
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?
669
Just use the pointer-events:none css property to allow click events to go through the element.
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.
The mouseover event occurs when a mouse pointer comes over an element, and mouseout – when it leaves.
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
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
