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 none value of this property is used for deactivating the click target and allows the elements to target whatever is underneath that element.
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.
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.Test it Now
Example - Using auto value
Here, we are using the auto value of the pointer-events property, which reacts to the pointer-events.Test it Now