Pointer-Events: None – Game Changer

This might sound familiar:

The Problem
An absolutely positioned div with a transparent background is stacked on top of a link that needs to be clickable.

The Fix
Futz around with z-index values until you manage to get the clickable element positioned so that your mouse triggers cursor:pointer on hover.


Okay, so that fix is not *wrong* per say, but there is a much much much much easier solution.

Introducing: The Pointer Events Property
Simply apply pointer-events: none to the offending div.

From Mozilla Developer Network:

“In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go “through” the element and target whatever is “underneath” that element instead.” Learn More…

Mind. Blown.