Have something you would like to see on the next Hatched Links? Mention me on Twitter @fromanegg or find me in #yui on irc.freenode.net

Have something you would like to see on the next Hatched Links? Mention me on Twitter @fromanegg or find me in #yui on irc.freenode.net

Have something you would like to see on the next Hatched Links? Mention me on Twitter @fromanegg or find me in #yui on irc.freenode.net

Yes it is possible to click through a div to underlying elements using only css. I’ve seen this question asked so many times online and so often the answer given is that you require javascript, or even sometimes whole libraries to accomplish this task.

Let me introduce you to the pointer-events CSS property. This property allows you to control under what situations an SVG target element should become the target of mouse events. As an experimental feature in CSS3 it has also added basic support for non-SVG elements in modern browsers (Chrome 2, FireFox 3.6, Safari, 4).

div.overlay {
    pointer-events: none;
}

Will now pass all click events on the overlay div through to the underlying elements. To get the same functionality in IE 5.5 and up we can use the AlphaImageLoader filter in an IE conditional.

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

Or in IE8 and up outside of a conditional.

div.overlay {
    -ms-filter: 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=overlay.png,  sizingMethod=scale)';
    background: none !important;
}

Having issues implementing this? Mention me @fromanegg or leave a comment below. Until next time!

Today I bring you the very first Hatched Links! Hatched Links is going to be a weekly post bringing you links to cool things in software development from around the web. I hope you enjoy!

Have something you would like to see on the next Hatched Links? Mention me on Twitter @fromanegg or find me in #yui on irc.freenode.net