CSS pointer-events property
Example
Set whether an element responds to mouse events:
Try it Yourself »
Definition and use
The pointer-events property is used to set whether an element responds to mouse events.
| Default Value: | none |
|---|---|
| Default Value: | auto |
| Inherited: | None |
| animation: | no。 readinganimatable |
| version: | CSS3 |
| JavaScript Syntax: | object.style.all="initial" Try it Yourself |
Browser Support
The numbers in the table indicate the lowest browser version that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| pointer-events | 2.0 | 11.0 | 3.6 | 4.0 | 9.0 |
CSS Syntax
pointer-events: auto|none;
Property value
| Property value | Description |
|---|---|
| auto | Default value. With this value, links can be clicked normally to visit. |
| none | The element cannot react to mouse events |
| initial | Sets the property to its default value,View moreinitial |
| inherit | Inherits the property from its parent element,View moreinherit |
Example
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* Only applies to SVG */
pointer-events: visibleFill; /* Only applies to SVG */
pointer-events: visibleStroke; /* Only applies to SVG */
pointer-events: visible; /* Only applies to SVG */
pointer-events: painted; /* Only applies to SVG */
pointer-events: fill; /* Only applies to SVG */
pointer-events: stroke; /* Only applies to SVG */
pointer-events: all; /* Only applies to SVG */
/* Global Values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
visiblePainted
Only applies to SVG. The element becomes the target of a mouse event only in the following cases:
- The visibility property value is visible, the mouse pointer is inside the element, and the fill property is set to a value other than none.
- The visibility property value is visible, the mouse pointer is on the element's boundary, and the stroke property is set to a value other than none.
visibleFill
Only applies to SVG. The element becomes the target of a mouse event only when the visibility property value is visible and the mouse pointer is inside the element. The value of the fill property does not affect event handling.
visibleStroke
Only applies to SVG. The element becomes the target of a mouse event only when the visibility property value is visible and the mouse pointer is on the element's boundary. The value of the stroke property does not affect event handling.
visible
Only applies to SVG. The element becomes the target of a mouse event only when the visibility property value is visible and the mouse pointer is inside or on the boundary of the element. The values of the fill and stroke properties do not affect event handling.
painted
Only applies to SVG. The element becomes the target of a mouse event only in the following cases:
- The mouse pointer is inside the element, and the fill property is set to a value other than none.
- The mouse pointer is on the element's boundary, and the stroke property is set to a value other than none.
The value of the visibility property does not affect event handling.
fill
Only applies to SVG. The element becomes the target of a mouse event only when the mouse pointer is inside the element. The values of the fill and visibility properties do not affect event handling.
stroke
Only applies to SVG. The element becomes the target of a mouse event only when the mouse pointer is on the element's boundary. The values of the stroke and visibility properties do not affect event handling.
all
Only applies to SVG. The element becomes the target of a mouse event only when the mouse pointer is inside or on the boundary of the element. The values of the fill, stroke, and visibility properties do not affect event handling.
other extensions