How to Use CSS pointer-events Property

While developing a website, you may want to restrict the viewers from performing some actions (click/hover) on some elements of the website, such as images or hyperlinks. There could be several reasons; for example, you do not want the user to click on the link because it is for improving the website’s internal linking structure or to protect what’s inside the link. In such scenarios, the CSS pointer-events property can be utilized to get the required results.

In this write-up, we will elaborate on how to use the CSS pointer-events property.

What is pointer-events Property?

CSS “pointer-events” property specifies the pointer/tap behavior towards the HTML element and whether the selected element will respond by performing actions such as hover or click.

How to Use pointer-events Property?

In CSS, the pointer-events property can be utilized to enable or disable pointer actions on some specific HTML elements. The syntax of the pointer-events property is given below.

Syntax

In the mentioned syntax, “auto” is the default value of the pointer-events property, and it enables the pointer action towards an element, and “none” is totally opposite to the auto; it disables pointer action on HTML elements.

Let’s move ahead and take an example to understand the pointer-events property.

Example 1
In our HTML file, specify an anchor tag with the text “LinuxHint.io” and place it within the body section.

HTML

Now, we will use the “pointer-events” property and assign it value “none”. This will disable the pointer action on the element.

CSS

Save your HTML file with mentioned code and run it using your browser:

Let’s take another example to cover the pointer-events property deeply.

Example 2
Set the pointer-events property value to “auto” this time. It will make the element respond over pointer hover or click. Nonetheless, auto is the default value of the pointer-events property.

CSS

Output

We have covered different uses of the CSS pointer-events property.

Conclusion

To control the pointer actions, we can utilize the CSS “pointer-events” property. The “auto” value is the predefined value of this property; it enables the actions over the HTML elements. When the pointer-events property is used with the value “none”, it disables the actions toward a specific element. This write-up has demonstrated how to use the CSS pointer-events property.