pointer-events: Making Elements Click-Through

Why it exists

Sometimes you need to visually layer elements in a way that conflicts with the desired user interaction. You might have a decorative overlay that covers a button, but you still want the button to be clickable. pointer-events solves this by decoupling an element's visual rendering from its event targeting.

The mental model

Think of pointer-events: none as making an element a ghost. It's visually there, but your mouse cursor passes right through it as if it doesn't exist, interacting with whatever is behind it. The default, pointer-events: auto, means the element behaves normally, blocking clicks from reaching elements below it.

How it works

The pointer-events property is specified with a keyword. For standard HTML elements, the two most important values are auto and none. auto is the default, where the element can be a target for pointer events like clicks and hovers. none makes the element non-reactive to the pointer; the browser will not consider it a target for hit-testing, and any pointer action will "fall through" to the next element down in the z-index stack. While many other values exist, they are primarily for use with SVG graphics to control interaction with an element's fill, stroke, or bounding box.

When to use it

Use pointer-events: none to create non-interactive UI elements that must sit on top of other content, such as a decorative gradient overlay on an image that is also a link. It's also a common way to temporarily disable an element, like a form button during submission, without using the disabled attribute, which has its own styles and behaviors.

When not to use it

Do not rely on pointer-events: none for accessibility. Screen readers and keyboard navigation are not affected by this property. If an element should be truly non-interactive for all users, use the disabled attribute on form controls or aria-hidden="true" for other elements. Also, be aware that children of an element with pointer-events: none can still be made interactive if their own pointer-events property is explicitly set back to auto.

One canonical example

Imagine a with a background image that contains a link ( tag) inside it. If you place another on top as a semi-transparent color overlay, that overlay will block clicks on the link. By setting pointer-events: none; on the overlay , you allow the user to click through the overlay and interact with the link underneath as intended.