CSS pointer-events Property

Definition and Usage

The pointer-events property controls whether an element can be the target of pointer input such as clicks, taps, and hovers. For HTML, you mostly use auto and none.

With none, the element is skipped in hit testing, so the pointer can reach what is behind it—handy for decorative overlays. It is inherited. Extra keywords such as fill and stroke are for SVG.

CSS Syntax

For everyday HTML, start with auto and none. SVG adds more hit-testing keywords when you need fill- or stroke-only targeting.

Property Values

How to Use pointer-events

Decide which layers should catch the pointer, then open a path for layers underneath when needed.

1. Leave pointer-events: auto on interactive controls (buttons, links, inputs).
2. Set none on decorative overlays that should not block clicks.
3. If a child inside a none parent must stay clickable, set that child back to auto.
4. Do not use none as a substitute for disabled on form controls.

Live Preview

A translucent overlay sits on a button. Change pointer-events on the overlay and try clicking.

CSS Examples

Each snippet focuses on pointer-events. Use Try It Yourself for a live editor.

<style>
  .stage {
    position: relative;
  }

  .overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
</style>

<div class="stage">
  <button type="button">Click me</button>
  <div class="overlay">Overlay</div>
</div>

<style>
  .stage {
    position: relative;
  }

  .overlay {
    position: absolute;
    inset: 0;
    pointer-events: auto;
  }
</style>

<div class="stage">
  <button type="button">Click me</button>
  <div class="overlay">Overlay</div>
</div>

<style>
  .stage {
    position: relative;
  }

  .overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .overlay button {
    pointer-events: auto;
  }
</style>

<div class="stage">
  <a href="#">Link below</a>
  <div class="overlay">
    <button type="button">Close</button>
  </div>
</div>

Key Takeaways