Home >CSS >CSS reference – properties, selectors, functions >pointer-events

pointer-events

With none the element stops reacting to the mouse and touch: clicks, hovering and scrolling with the wheel do not “see” it and go to the element below it. It suits decorative layers over content – gradients, shadows, captions over an image.

Values

auto – the default: the element reacts normally.
none – the element does not react; events go to the elements below it. A descendant with pointer-events: auto still reacts.
visiblePainted, visibleFill, fill, stroke, painted, all… – only for SVG: which parts of a shape (the fill, the stroke) react.

Initial value: auto. Inherited: yes. Applies to: all elements.

Examples

A fade to white at the end of a scrolled list – it lies over the last links, but a click passes through to the link below it:

<div class="wrapper">
  <div class="list">
    <a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a><a href="#">Link 4</a>
  </div>
  <div class="fade"></div>
</div>

.wrapper {
  position: relative;
  max-width: 220px;
}
.list a {
  display: block;
  padding: 4px 0;
  color: #0088d1;
}
.fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
}

result

Link 1 Link 2 Link 3 Link 4

Things to watch out for

pointer-events: none does not disable an element: a link or a button can still be reached with the Tab key and activated with Enter. Disable a button with the disabled attribute, remove a link or take away its href.
An element with none gets neither :hover nor shows its own cursor.
The value is inherited, but a descendant can set auto and react – a parent with none then lets clicks through only outside it.

Browser support

Baseline – widely available: works in all major browsers and has for a long time (since 2015 at the latest). Since version: Chrome 1, Firefox 1.5, Safari 4. As of October 2026 (MDN browser-compat-data).