CSS pointer-events Property

pointer-events is very useful when set to none to deactivate the click target and allow elements underneath a certain element to get the click.

.no-click {
  pointer-events: none;
}

Here for example, our top element covers part of the bottom element, but notice how the wait cursor of the bottom element gets active even when the pointer is still over the top element, because pointer-events is set to none on the top element. If we were to click on the top element where the bottom element is covered, the bottom element would get the click:

bottom
top

SVG-only values

pointer-events can also take a few more values when applied to SVG elements:

  • all: The element is a target when the pointer is over a fill or a stroke.
  • stroke: The element is a target when the pointer is over a stroke.
  • fill: The element is a target when the pointer over a fill.
  • painted: The element is a target when the pointer is on a fill or a stroke and that that fill or stoke are set to something else than none, regardless of the visibility.
  • visible: The element is a target when the pointer is on a fill or a stroke and that that fill or stoke are set to visible, regardless of the value for the fill or stroke.
  • visiblePainted: The element is a target when the pointer is on a fill or a stroke and that that fill or stoke are set to visible and set to something else than none.
  • visibleFill: The element is a target when the pointer is on a fill and that that fill is set to visible, regardless of the value for the fill.
  • visibleStroke: The element is a target when the pointer is on a stroke and that that stroke is set to visible, regardless of the value for the stroke.

Browser Support

Can I Use pointer-events? Data on support for the pointer-events feature across the major browsers from caniuse.com.

  Tweet It
✖ Clear

🕵 Search Results

🔎 Searching...