CSS3 Pointer Events

Summary

The CSS property pointer-events allows authors to control whether or when an element may be the target of a mouse event. This property is used to specify under which circumstance (if any) a mouse event should go “through” an element and target whatever is “underneath” that element instead.

• Initial value : auto
• Applies to: all elements
• Inherited : yes
• Media: visual
• Computed value : the specified value, or else the inherited value

Syntax

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

Values

Note: as of Firefox 3.6, only the values auto and none apply to all elements. The other values only apply to SVG and behave like auto in other XML and HTML content.

auto

The element behaves as it would if the pointer-events property was not specified. In SVG content this value and the value visiblePainted have the same effect.

none

The element is never the target of mouse events, although mouse events may target its descendant elements if those descendants have pointer-events set to some other value, in which case mouse events will trigger event listeners on this element as appropriate on their way to/from the descendant during the event capture/bubble phases.

visiblePainted

SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when 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.

visibleFill

SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the fill property does not effect event processing.

visibleStroke

SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke property does not effect event processing.

visible

SVG only. The element can be the target of a mouse event when the visibility property is set to visible and 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 effect event processing.

painted

SVG only. The element can only be the target of a mouse event when 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 thannone. The value of the visibility property does not effect event processing.

fill

SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) of the element. The values of the fill andvisibility properties do not effect event processing.

stroke

SVG only. The element can only be the target of a mouse event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the stroke andvisibility properties do not effect event processing.

all

SVG only. The element can only be the target of a mouse 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 effect event processing.

Examples