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
If in your transparent div element have another child elements and you want to make it still clickable, then let add this css
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
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
Don’t ask me why, let ‘s tell me your problem. And good luck!