You can clip our wings but we will always remember what it was like to fly.

Allow click through an HTML element

When one HTML element is over another one (like when positioning an element using position:absolute), you usually can't click through the top element to access the bottom element.

That's used as a common technique to prevent the right click on images by some sites (like Flickr). They just add an empty transparent div over their images to prevent the lambda user from right clicking and saving the image.

Sometimes, when integrating complex designs, you need those additional layers, but you also want the user to be able to click through them, as if they weren't there.

Just use the pointer-events:none css property to allow click events to go through the element.

This is only supported by Firefox 3.6+, Chrome and Safari for now.


Just thought I'd let you know that the CSS property ends with an "s"

pointer-events: none;

I was banging my head trying to figure out why it wasn't working. lol
Neilon 22/1/11
You're right, I'll update my post.
Timon 28/1/11
This is awesome, thanks :D
I've spent a while looking for something to do this, and just got responses like "that's just not possible".
Farranon 7/2/11
its not working in IE , please let me know how we can achieve the same
harishaon 9/12/11
You can use chrome frame but then your users will have to install it.

Tristan Smithon 15/12/11
Tristan Smith
I've been using this technique in my current project. It works perfectly in Chrome, Firefox and IE but Opera doesn't yet support it.

According to this article, the support should be added in version 12.

Opera isn't really popular as a computer browser, but apparently there is a good 22% of mobile devices user that user Opera Mobile/Mini
lmryon 15/5/12
... and 161 spam blocked

Adding a comment

Leave this field empty, it is only here to defeat spam bots
Will not be published