CSS pointer-events Property
Example
Set whether an element reacts to mouse events:
div.ex1 {
pointer-events: none;
}
div.ex2 {
pointer-events: auto;
}
Definition and Usage
The pointer-events property is used to set whether an element reacts to mouse events.
| Default value: | none |
|---|---|
| Default value: | auto |
| --- | --- |
| Inherited: | no |
| --- | --- |
| Animatable: | no. Read about animatable |
| --- | --- |
| Version: | CSS3 |
| --- | --- |
| JavaScript syntax: | object.style.all="initial" Try it |
| --- | --- |
Browser Support
The numbers in the table specify the minimum version number of the browser that supports the property.
| Property | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| pointer-events | 2.0 | 11.0 | 3.6 | 4.0 | 9.0 |
CSS Syntax
pointer-events: auto|none;
Property Values
| Value | Description |
|---|---|
| auto | The default value, allows the element to be normally clickable. |
| none | The element does not react to mouse events. |
| initial | Sets this property to its default value. Read more about initial |
| inherit | Inherits this property from its parent element. Read more about inherit |
Example
/* Property values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* Only for SVG */
pointer-events: visibleFill; /* Only for SVG */
pointer-events: visibleStroke; /* Only for SVG */
pointer-events: visible; /* Only for SVG */
pointer-events: painted; /* Only for SVG */
pointer-events: fill; /* Only for SVG */
pointer-events: stroke; /* Only for SVG */
pointer-events: all; /* Only for SVG */
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
visiblePainted
Only for SVG, the element becomes a target for mouse events if:
- The
visibilityproperty is set tovisibleand the mouse pointer is over the interior of the element, and thefillproperty does not specifynone. - The
visibilityproperty is set tovisibleand the mouse pointer is over the boundary of the element, and thestrokeproperty does not specifynone.
visibleFill
Only for SVG, the element becomes a target for mouse events if the visibility property is set to visible and the mouse pointer is over the interior of the element. The value of the fill property does not affect event handling.
visibleStroke
Only for SVG, the element becomes a target for mouse events if the visibility property is set to visible and the mouse pointer is over the boundary of the element. The value of the stroke property does not affect event handling.
visible
Only for SVG, the element becomes a target for mouse events if the visibility property is set to visible and the mouse pointer is over the interior or boundary of the element. The values of the fill and stroke properties do not affect event handling.
painted
Only for SVG, the element becomes a target for mouse events if:
- The mouse pointer is over the interior of the element, and the
fillproperty does not specifynone. - The mouse pointer is over the boundary of the element, and the
strokeproperty does not specifynone.
The value of the visibility property does not affect event handling.
fill
Only for SVG, the element becomes a target for mouse events if the mouse pointer is over the interior of the element. The value of the fill property does not affect event handling.
Applies only to SVG. The element becomes the target of mouse events only when the mouse pointer is inside the element. The values of the fill and visibility properties do not affect event handling.
stroke
Applies only to SVG. The element becomes the target of mouse events only when the mouse pointer is on the boundary of the element. The values of the stroke and visibility properties do not affect event handling.
all
Applies only to SVG. The element becomes the target of mouse events 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.