Codectionary / Developer documentation / CSS

Pointer Hit Testing with pointer-events

pointer-events: none removes an element from pointer hit testing, allowing clicks to reach content underneath. It does not disable keyboard focus or inherently make an element inaccessible. Use disabled or inert when the intent is to disable interaction rather than let pointer events pass through.

Syntax

.decoration { pointer-events: none; }

Examples

Pointer Hit Testing with pointer-events: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.wrapper { display: inline-block; position: relative; }
button { padding: 1rem 3rem 1rem 1rem; }
.decoration { position: absolute; right: 1rem; top: 1rem; pointer-events: none; }
  1. Expected result: Clicking the decorative star activates the underlying button and displays Clicked.
  2. The star is decorative and excluded from accessibility naming with aria-hidden.
  3. Keyboard activation still belongs to the native button.
HTML used by this example

<div class="wrapper"><button id="action">Click through the decoration</button><span class="decoration" aria-hidden="true">★</span></div><output id="result"></output><script>document.querySelector("#action").addEventListener("click", () => { document.querySelector("#result").textContent = "Clicked"; });</script>

Best practices

  • Do not use pointer-events alone to disable a control.
  • Keep click-through layers free of controls that users need to operate.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading