How to Click Through a div to its Underlying Elements

Imagine that you have a div the background of which is transparent, along with border. Under this div, you have other different elements. You want to click on these underlying elements through the div. This causes problems for most developers, as they can click underlying elements only in case of clicking the outside of the overlay <div>. If you have such a problem, then this snippet is for you. Let’s dive in and try to do it together.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Add HTML

An HTML code is needed.

Add CSS

  • You can solve this problem using the “none” value of the CSS pointer-events property. In the case of using this value, the element will not react to the pointer-events.
  • With the help of the CSS background property put your transparent background.
pointer-events: none; 
background: url(background);

Lets’ see the whole code.

Example of clicking through a div to its underlying elements:

The whole code is needed

Using the AlphaImageLoader filter, you can even put a transparent PNG or GIF in the overlay div and click it through a div.

Example of using the AlphaImageLoader filter:

The whole code is needed

Another way of solving this problem is disabling pointer-events in a parent element, leaving it enabled for its child elements. This is beneficial when you work with various overlapping div layers, where you want the child elements to react pointer-events, but the parent elements - no.

Here you need to use the “none” value of the pointer-events property for the parent div, and the “auto” value for the child div.

Example of the pointer-events property with the “none” and “auto” values.

.parent { pointer-events:none; } 
.child { pointer-events:auto; } 
<div class="some-container"> 
<ul class="layer-0 parent"> 
<li class="click-me child"></li> 
<li class="click-me child"></li> 
</ul> 
<ul class="layer-1 parent"> 
<li class="click-me-also child"></li> 
<li class="click-me-also child"></li> 
</ul> 
</div>