CSS pointer-events Property

The pointer-events property sets whether an element responds to pointer events.

Pointer events includes hover or active states, clicking events, touching events, etc.

Most pointer-events values are relevant for SVG images only.

Example

#

This link does not respond to mouse clicks because of the pointer-events property is set to none..

Go to Google

<p>
  Go to <a href="https://www.google.com/"
           target="_blank"
           style="pointer-events: none;">
    Google
  </a>
</p>

Syntax

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

Values

#

Value Description
auto Default. Element reacts to pointer events, like :hover and click.
none The element does not react to pointer events
visiblePainted SVG Only. Reacts to points events when visibility property is set to visible and cursor is over fill or stroke area. The fill and stroke values cannot be none.
visibleFill SVG Only. Reacts to points events when visibility property is set to visible and cursor is over a fill area.
visibleStroke SVG Only. Reacts to points events when visibility property is set to visible and cursor is over a stroke area.
visible SVG Only. Reacts to points events when visibility property is set to visible.
painted SVG Only. Reacts to points events when cursor is over fill or stroke area. The fill and stroke values cannot be none.
fill SVG Only. Reacts to points events when cursor is over fill area.
stroke SVG Only. Reacts to points events when cursor is over stroke area.
all SVG Only. Reacts to points events when cursor is over fill or stroke area.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when pointer-events support started for each browser.

Chrome
2.0 May 2009
Firefox
3.6 Jan 2010
IE/Edge
11.0 Oct 2013
Opera
9.0 Jun 2006
Safari
4.0 Jun 2009

You may also like

Guides