CSS pointer-events Property

February 10, 2021 12:37 pm IST

You are Here:

CSS pointer-events Property

CSS pointer-events property defines whether or not an element reacts to pointer events.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> a{ display: block; margin: 10px; } a:nth-child(2){ pointer-events: none; } a:nth-child(3){ pointer-events: auto; } </style> </head> <body> <h1>CSS pointer-events Property</h1> <a href="#">Hover me, I'm pointer event none.</a> <a href="#">Hover me, I'm pointer event auto.</a> </body> </html>

Run

Syntax

Using CSS

element{ pointer-events: none; }

Using Javascript

object.style.pointerEvents="none";

Animatable

No, pointer-events property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS pointer-events property is auto.

Property Value

The following table provides a list of values for CSS pointer-events property.

Value	Explanation
none	Specifies that the element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value.
auto	Specifies that the element behaves as it would if the pointer-events property were not specified.

Using JavaScript

In the following example, we will demonstrate how to change the CSS pointer-events property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS pointer-events Property</h1> <a href="#">Hover me before and after clicking on the button.</a> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("a")[0]; function myFunction(){ x.style.pointerEvents = "none"; } </script> </body> </html>

Run