Click through div to underlying elements

1.1K Asked by KudoTaniguchi in Devops , Asked on Jul 19, 2021

I have a div that has background:transparent, along with border. Underneath this div, I have more elements.

Currently, I'm able to click the underlying elements when I click outside of the overlay div. However, I'm unable to click the underlying elements when clicking directly on the overlay div.

I want to be able to click through this div so that I can click on the underlying elements. How to use css click through to underlying elements?

My Problem

Answered by Papuii colney Chauhan

Yes, you can click through div to underlying elements by following the below mentioned way:-

You can do this by using the pointer-events: none along with CSS conditional statements for IE11 you can get a cross-browser compatible solution for this problem.

Another thing you can do is by using AlphaImageLoader, you can even put transparent.PNG/.GIFs in the overlay div and have clicks flow through to elements underneath.

See the CSS you can use below:-

pointer-events: none;

background: url('your_transparent.png');

Below is the IE11 conditional:-

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale'); 

background: none !important;

This way you can use css click through to underlying elements.

Click through div to underlying elements

Your Answer