HTML/CSS make clickable through transparent DIV layer

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

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