W3docs
en
Log in

CSS pointer-events Property

Use the pointer-events property which specifies whether or not an element can respond to touch events. See property values and examples.

The pointer-events property defines whether or not an element reacts to pointer events.

Info

Originally defined for SVG, pointer-events is now a standard CSS property.

Many values are applicable to SVG elements, but only auto and none are widely supported for HTML elements.

Important Notes

Setting pointer-events: none on an element prevents it from being the target of pointer events, but it does not stop event listeners on that element from firing. If a child element has pointer-events enabled, it can still be targeted. Consequently, events targeting the child will bubble up through the parent and trigger any listeners attached to it.

Initial Valueauto
Applies toAll elements.
InheritedNo.
AnimatableNo.
VersionScalable Vector Graphics (SVG) 1.1 (Second Edition).
DOM Syntaxobject.style.pointerEvents = "auto";

Syntax

CSS pointer-events syntax

pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | initial | inherit;

Example of the pointer-events property:

CSS pointer-events code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        pointer-events: none;
      }
      div.example2 {
        pointer-events: auto;
      }
      div.example:hover,
      div.example2:hover {
        outline: 2px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>The Pointer-events Property</h2>
    <h3>Pointer-events: none</h3>
    <div class="example">
      Click here: <a href="https://www.w3docs.com/learn-javascript.html">JavaScript Tutorial</a>
    </div>
    <h3>Pointer-events: auto</h3>
    <div class="example2">
      Click here: <a href="https://www.w3docs.com/learn-css.html">CSS Tutorial</a>
    </div>
  </body>
</html>
Try it Yourself »

Result

CSS pointer-events none value

In the given example, hover over the elements to see which one reacts to the pointer-events.

This example shows how pointer events can fall through or be caught by underlying elements. The overlapping paths demonstrate this behavior: the path with class .c has pointer-events: none, so clicks pass through it to the shapes underneath. The path with class .d uses pointer-events: all to ensure it catches events even when visually overlapping other elements:

Example of pointer-events with the <svg> tag:

CSS pointer-events none value example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        fill: #ccc;
      }
      .b {
        fill: #8ebf42;
      }
      .c {
        fill: #1c87c9;
        pointer-events: none;
      }
      .d {
        stroke: #666;
        fill: none;
        pointer-events: all;
      }
      .box:hover {
        stroke: #000;
        stroke-width: 5;
      }
    </style>
  </head>
  <body>
    <h2>Pointer-events property example</h2>
    <svg width="300" height="300">
      <g transform="translate(20, 20)">
        <path class="a box" d="M 0 0 L 100 0 L 100 100 L 0 100 z" />
        <path class="b box" d="M 50 50 l 100 0 l 0 100 l -100 0 z" />
        <path class="c box" d="M 100 100 l 100 0 l 0 100 l -100 0 z" />
        <path class="d box" d="M 150 150 l 100 0 l 0 100 l -100 0 z" />
      </g>
    </svg>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
noneThe element never reacts to the pointer events.
autoThe element accepts pointer events such as clicks, hover, etc. This is the default value of this property.
initialMakes the property use its default value.
inheritInherits the property from its parent element.

SVG only Values

ValueDescription
visiblePaintedThe element can only be the target of a pointer event when the visibility property is set to visible, the mouse cursor is over the interior or perimeter of the element, and the fill or stroke property is set to a value other than none.
visibleFillThe element can only be the target of a pointer event when the visibility property is set to visible and the mouse cursor is over the interior of the element.
visibleStrokeThe element can only be the target of a pointer event when the visibility property is set to visible and the mouse cursor is over the perimeter of the element.
visibleThe element can only be the target of a pointer event when the visibility property is set to visible and the mouse cursor is over either the interior or the perimeter of the element.
paintedThe element can only be the target of a pointer event when the mouse cursor is over the interior or perimeter of the element and the fill or stroke property is set to a value other than none.
fillThe element can only be the target of a pointer event when the pointer is over the interior of the element.
strokeThe element can only be the target of a pointer event when the pointer is over the perimeter of the element.
allThe element can only be the target of a pointer event when the pointer is over the interior or the perimeter of the element.

Practice

Practice

What does the 'pointer-events' property in CSS do?