Thepointer-eventsCSS property sets under what circumstances (if any) a particular graphic element can become thetarget of pointer events.

Try it

pointer-events: auto;

pointer-events: none;

pointer-events: stroke; /* SVG-only */

pointer-events: fill; /* SVG-only */

<section>  <div>    <p>      <a href="#">example link</a>    </p>    <p>      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">        <a xlink:href="#">          <circle            cx="50"            cy="50"            fill="#3E6E84"            r="40"            stroke="#ffb500"            stroke-width="5"></circle>          <text fill="white" text-anchor="middle" x="50" y="55">SVG</text>        </a>      </svg>    </p>  </div></section>

#example-element {  font-weight: bold;}#example-element a {  color: #009e5f;}#example-element svg {  width: 10em;  height: 10em;}

Syntax

/* Keyword values */pointer-events: auto;pointer-events: none;/* Values used in SVGs */pointer-events: visiblePainted;pointer-events: visibleFill;pointer-events: visibleStroke;pointer-events: visible;pointer-events: painted;pointer-events: fill;pointer-events: stroke;pointer-events: bounding-box;pointer-events: all;/* Global values */pointer-events: inherit;pointer-events: initial;pointer-events: revert;pointer-events: revert-layer;pointer-events: unset;

Thepointer-events property is specified as a single keyword chosen from the list of values below.

Values

auto

The element behaves as it would if thepointer-events property were not specified. In SVG content, this value and the valuevisiblePainted have the same effect.

none

The element on its own is never thetarget of pointer events. However its subtree could be kept targetable by settingpointer-events to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to or from the descendant during the event capture andbubble phases.

Note:Thepointerenter andpointerleave events are fired when a pointing device is moved into an element or one of its descendants. So, even ifpointer-events: none is set on the parent and not set on children, the events are triggered on the parent after the pointer is moved in or out of a descendant.

SVG only (experimental for HTML)

visiblePainted

SVG only (experimental for HTML). The element can only be the target of a pointer event when thevisibility property is set tovisible and e.g., when a mouse cursor is over the interior (i.e., 'fill') of the element and thefill property is set to a value other thannone, or when a mouse cursor is over the perimeter (i.e., 'stroke') of the element and thestroke property is set to a value other thannone.

visibleFill

SVG only. The element can only be the target of a pointer event when thevisibility property is set tovisible and when e.g., a mouse cursor is over the interior (i.e., fill) of the element. The value of thefill property does not affect event processing.

visibleStroke

SVG only. The element can only be the target of a pointer event when thevisibility property is set tovisible and e.g., when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of thestroke property does not affect event processing.

visible

SVG only (experimental for HTML). The element can be the target of a pointer event when thevisibility property is set tovisible and e.g., the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of thefill andstroke do not affect event processing.

painted

SVG only (experimental for HTML). The element can only be the target of a pointer event when e.g., the mouse cursor is over the interior (i.e., 'fill') of the element and thefill property is set to a value other thannone, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and thestroke property is set to a value other thannone. The value of thevisibility property does not affect event processing.

fill

SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) of the element. The values of thefill andvisibility properties do not affect event processing.

stroke

SVG only. The element can only be the target of a pointer event when the pointer is over the perimeter (i.e., stroke) of the element. The values of thestroke andvisibility properties do not affect event processing.

bounding-box

SVG only. The element can only be the target of a pointer event when the pointer is over thebounding box of the element.

all

SVG only (experimental for HTML). The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of thefill,stroke, andvisibility properties do not affect event processing.

Description

When this property is unspecified, the same characteristics of thevisiblePainted value apply to SVG content.

In addition to indicating that the element is not the target of pointer events, the valuenone instructs the pointer event to go "through" the element and target whatever is "underneath" that element instead.

Note that preventing an element from being the target of pointer events by usingpointer-events doesnot necessarily mean that pointer event listeners on that elementcannot orwill not be triggered. If one of the element's children haspointer-events explicitly set toallow that child to be the target of pointer events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any pointer activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).

Elements withpointer-events: none will still receive focus through sequential keyboard navigation using theTab key.

Formal definition

Formal syntax

pointer-events =
auto|
bounding-box|
visiblePainted|
visibleFill|
visibleStroke|
visible|
painted|
fill|
stroke|
all|
none

Examples

Disabling pointer events on all images

This example disables pointer events (clicking, dragging, hovering, etc.) on all images.

img {  pointer-events: none;}

Disabling pointer events on a single link

This example disables pointer events on the link tohttp://example.com.

HTML

<ul>  <li><a href="https://developer.mozilla.org">MDN</a></li>  <li><a href="http://example.com">example.com</a></li></ul>

CSS

a[href="http://example.com"]{  pointer-events: none;}

Result

Specifications

Browser compatibility

See also

• user-select
• SVGpointer-events attribute
• SVGvisibility attribute
• PointerEvent