CSS pointer-events property

This CSS property specifies whether or not an element shows some action when the pointer event is triggered upon it. The pointer-events are triggered by touch, stylus, mouse click, and many more.

The pointer-events property controls how the HTML elements respond to events such as the CSS active/hover states, mouse/touch events, JavaScript click/tap events, and also controls whether or not the cursor is visible.

The none value of this property is used for deactivating the click target and allows the elements to target whatever is underneath that element.

Syntax

Although this property includes eleven possible values, but the values given in the above syntax are the valid values for the HTML elements, other values are reserved for use with SVG.

Property Values

none: This value indicates that an element doesn't react to pointer events. It avoids all state, click, and the cursor options on the specified HTML element.

auto: It is the default value. It indicates that an element must react to pointer events such as the click and :hover.

Let's understand these values by using some examples.

Example - Using none value

In this example, we are using the none value which does not target the pointer-events.

Output

Example - Using auto value

Here, we are using the auto value of the pointer-events property, which reacts to the pointer-events.

Output