CSS Reference Property

pointer-events

The pointer-events property is used to control under what conditions particular graphic elements can become the target of pointer events.

Please note that is an SVG property and is not defined in any CSS specification.

The pointer-events property can have many values that are applicable to SVG elements, but only three of these values are applicable to HTML elements.

When pointer-events is used on HTML elements, it can specify whether or not an element can respond to mouse (or touch) events. It can be used to prevent click, state (CSS active, focus, and hover states), and cursor actions (showing the pointer cursor over links, for example).

You can either have the element respond to pointer events (auto), or prevent it from doing so (none). If you prevent the it from responding to pointer events, an element that is underneath it will become the target of these events. If you click the element, the element beneath it will receive that click event. Same applies to hover and other cursor actions. For example, you would be able to select text in an element that is positioned beneath an element with pointer-events: none (see demo below).

The pointer-events property can be very useful in different scenarios. One advantage of this property is allowing you to create 60fps scrolling by using pointer-events: none. Ryan Seddon has written a detailed article on how it works; his article is worth a read.

Trivia & Notes

Disabling pointer events on an element can be overridden on a child element: If a child of the element has pointer-events: auto (i.e. enabled), it will be able to handle and respond to click events, even if its parent doesn’t.

As mentioned above, the pointer-events property is an SVG property. Despite being present in the early drafts of the User Interface Module Level 3, it was removed from that module and pushed to Level 4. More about that here.

Official Syntax

Syntax: Formal Syntax:

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

The values in the official syntax are applicable to SVG elements. Of these values, only these are applicable to HTML:

pointer-events: auto | none | inherit

Initial: auto
Applies To: all elements
Animatable: no

Values

auto: The default value. Pointer events are enabled. The element responds to pointer events, blocking those events from being fired on elements beneath it.
none: Pointer events are disabled on the element. The element does not respond to pointer events. Elements beneath it can respond to pointer events as if the element did not exist over them.
inherit: The element inherits its pointer-events value from its parent.

Notes

See the SVG specification for more information about the remaining values.

Examples

The following example positions an overlay element over the entire page. The overlay would be faded into view via some JavaScript method that would be fired if the user performs some kind of action on the page, for example. In order to prevent the overlay from blocking pointer events on the rest of the elements on the page, we’re going to disable pointer events on it, so that the events can be fired on the page beneath it as they normally would.

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* ... */
    pointer-events: none;
}

Then, using JavaScript, the element could be faded into view, and the pointer events can be enabled on it so that the user can interact with it as needed.

Live Demo

In the following example, the overlay has pointer-events: none, so you can select the text and click the anchor tags beneath it. Also notice how the cursor turns into a pointer (pointing hand) when you hover over the links, because the hover states are fired on them.

Try changing the none value to auto to see how it makes the overlay prevent pointer events from being fired on the links and anything beneath it.

View this demo on the Codrops Playground

Browser Support

CSS pointer-events (for HTML)

This CSS property, when set to "none" allows elements to not receive hover/click events, instead the event will occur on anything behind it.

Unofficial or W3C "Note"

Supported from the following versions:

Desktop

Mobile / Tablet

* denotes prefix required.

Supported:
Yes
No
Partially
Polyfill

Stats from caniuse.com