CSS pointer-events property is used to control mouse events such as ‘hover’, ‘click’, ‘drag’, etc. over HTML elements. For example, you can restrict a user to click on the download button if he is not logged in.
The pointer-events property accepts two values, auto and none. The auto is the default value which allows all mouse events.
The value none restricts all default pointer-events such as clicking, dragging, etc. See the example below:
Example:
.btn1{
pointer-events: auto;
}
.btn2{
pointer-events: none;
}
CSS Syntax
The pointer-events property has the following syntax:
pointer-events: auto|none|initial|inherit;
Property Values
The pointer-events property accepts the following values:
| auto | Allows all mouse events. This is the default value. |
| none | Restricts all default mouse events. |
| initial | Sets the pointer-events property to its default value(auto). |
| inherit | Inherits the pointer-events property from the parent element. |
General Info
| Default Value | auto |
| Inherited | Yes |
| JavaScript Usage | element.style.pointerEvents = “none” |
