.sneakyCSS { pointer-events: none; }

Every once in a while I have a semi-transparent image or other element that acts as an "overlay" on top of an existing element. (Most recently, I had a canvas element laid on top of some other animated elements showing debug information for box2dweb.)

Unfortunately, the overlay element wants to steal mouse clicks from the elements underneath. You can manually bubble those events up the dom, but that can be a real pain. Fortunately, CSS includes an experimental feature that lets us 'turn off' mouse events for an element:

.overlay {
  pointer-events: none;
}

This trick doesn't work in any known versions of IE, but it seems to work in lots of other places, and can be really useful for optional items like the debug view I was working on.

Full documentation can be found on MDN: https://developer.mozilla.org/en-US/docs/CSS/pointer-events