When using HTML/CSS to implement beautiful graphic design, we will need to use the transparent DIV what is the DIV html tag with css style ‘background: transparent;’. Just like you I use it and I meet the problem with it many times when I want to keep the transparent layer but I still want to keep the clickable element (button, link, text … ) under the fly layer. So I want to do the magic thing what can make it clickable through transparent DIV

clickable through div layer

Ok, in the case I share you guy this article, I already solved my problem and here is the key CSS

pointer-events:none;

If in your transparent div element have another child elements and you want to make it still clickable, then let add this css

pointer-events:all;

It will keep the parent transparent and click through in the case the child still keep clickable.

Clickable through transparent DIV layer in IE

Our challenge is not end here, we still meet the problem with IE, in this case, you can use this CSS for IE

background:white; opacity:0; filter:Alpha(opacity=0);

If you still meet the problem with too old IE you can use this magic CSS

background:url('transparent.png');

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png', sizingMethod='scale');
background:none !important;

With transparent.png is transparent image with size 1px x 1 px

Cross-browser clickable through transparent DIV layer via javascript library

Actually, the CSS element pointer-events will help your style work on all chrome and firefox version. If you think it ‘s too complex to fire with IE then you can simply use this solution what make pointer-events work in IE

https://github.com/kmewhort/pointer_events_polyfill

Don’t ask me why, let ‘s tell me your problem. And good luck!

References:

http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements

http://stackoverflow.com/questions/1401658/html-overlay-which-allows-clicks-to-fall-through-to-elements-behind-it

http://stackoverflow.com/questions/6233872/overlay-on-clickable-region-css

7 thoughts on “HTML/CSS make clickable through transparent DIV layer

  1. Thanks guys, you don’t know you already saved me a huge time to research to solve this CSS issue for my html site. Keep release the useful article like this. You are rock!!

  2. I meet the problem with my div layer inside the big layer, I want user still click and mark the text inside the child layer but the outside layer what I still keep it click through. How I can do that?

  3. You blog have very many useful article, that ‘s nice to know. Do you have the partship for article releasee? What if I want to join your team? Thanks

      1. Welcome to our talent team. But we need some test before bring you to our team or not. Please don’t worry, if you love magento performance job, you will have a ticket for sure somedays.

Leave a Reply