If we wanted to replicate this on a web page, we could use a map API from Google, Bing or any other provider and overlay the telescope graphic. Unfortunately, the map would become inoperable and you couldn’t drag or zoom because the controls are obscured by a transparent graphic.

pointer-events to the Rescue!

The default pointer-events setting is auto and the overlaid image would receive all mouse events even though it’s not waiting for any. However, setting it to none means that it will never be the target of mouse events. In other words, the map can be dragged and used as if overlay was not there.

View the CSS3 pointer-events Mars probe Olympic viewer demonstration page…

Try this in Firefox, Chrome or Safari and the map remains usable. IE and Opera don’t support HTML pointer-events so dragging and zooming will fail.

Setting pointer-events to none does not necessarily mean an element will never receive mouse events. If a child element permits capture, it will receive those events as they bubble up the parent chain.

In addition, pointer-events originated from SVG CSS where it offers several other options, e.g. stroke — the element can only receive mouse events when the pointer is over the stoke perimeter. SVG pointer-events are supported in all browsers, including IE9 and Opera.

For more information, refer to the MDN pointer-events documentation. I suspect you can think of many situations where the property would be useful.