CSS pointer-events to allow clicks on underlying elements

Ever placed an element on top of another element, but wanted the one under to be clickable? Now it’s possible, thanks to CSS pointer-events!

CSS pointer-events

Pointer-events is something that originally came from the SVG world and is already present in a number of web browsers. However, it is now also available for any HTML element with the help of a little CSS. The property is called pointer-events, and basically you can set it to auto, which is normal behavior and none, which is the interesting value.

Applying it to an element

If you have set the CSS of an element to pointer-events: none, it won’t catch any click on it at all, but instead just let the event fall through to the element below it. Like this:

<style>
  .overlay {
    .pointer-events: none;
  }
</style>

<div class="overlay"></div>

Web browser support

Pointer-events are supported since Firefox 3.6+, Safari 4 and Google Chrome so far. I feel certain Opera will catch up soon, too – with IE10, I have no idea if they plan to support it or not.