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

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.

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 Interface Module Level 3, it was removed from that module and pushed to Level 4. More about that here.

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