The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.
In addition to indicating that the element is not the target of pointer events, the value noneinstructs the pointer event to go “through” the element and target whatever is “underneath” that element instead.
Syntax
/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;The pointer-events property is specified as a single keyword chosen from the list of values below.
ValuesS
autoThe element behaves as it would if the pointer-events property were not specified. In SVG content, this value and the value visiblePainted have the same effect.noneThe 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. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
SVG only
visiblePaintedSVG only. The element can only be the target of a pointer event when the visibilityproperty is set to visible and e.g. when a mouse cursor is over the interior (i.e., ‘fill’) of the element and the fill property is set to a value other than none, or when a mouse cursor is over the perimeter (i.e., ‘stroke’) of the element and the stroke property is set to a value other than none.visibleFillSVG only. The element can only be the target of a pointer event when the visibilityproperty is set to visible and when e.g. a mouse cursor is over the interior (i.e., fill) of the element. The value of the fill property does not affect event processing.visibleStrokeSVG only. The element can only be the target of a pointer event when the visibilityproperty is set to visible and e.g. when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke property does not affect event processing.visibleSVG only. The element can be the target of a pointer event when the visibility property is set to visible and e.g. the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill and stroke do not affect event processing.paintedSVG only. The element can only be the target of a pointer event when e.g. the mouse cursor is over the interior (i.e., ‘fill’) of the element and the fill property is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., ‘stroke’) of the element and the stroke property is set to a value other than none. The value of the visibility property does not affect event processing.fillSVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) of the element. The values of the fill and visibility properties do not affect event processing.strokeSVG only. The element can only be the target of a pointer event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the stroke and visibilityproperties do not affect event processing.allSVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill, stroke, and visibility properties do not affect event processing.
Formal syntax
auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
