CSS pointer-events Property

Description

The pointer-events CSS property allows developers to control how HTML elements respond to mouse events such as clicks and hover. It can be applied to any HTML element and has several possible values, including "auto" (the default), which allows the element to respond to pointer events as normal, "none," which makes the element completely unresponsive to pointer events, and other values like "visiblePainted" and "fill" that offer more nuanced control. This property is particularly useful in situations where you want to create interactive user interfaces and need to precisely control which elements can be interacted with and which should be ignored, providing a flexible way to manage the behavior of elements on a webpage.

Initial value

auto

Applies to

all elements

Inherited

yes

Computed value

as specified

Animatable

discrete

JavaScript syntax

object.style.pointerEvents

Interactive Demo

pointer-events: auto;

pointer-events: none;

Syntax

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

Values

• 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.
• bounding-boxThe given element can be a target element for pointer events when the pointer is over the bounding box of the element.
• visiblePaintedThe element can only be the target of a pointer event when the visibility property 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.
• visibleFillThe element can only be the target of a pointer event when the visibility property 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.
• visibleStrokeThe element can only be the target of a pointer event when the visibility property 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.
• visibleThe 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.
• paintedThe 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.
• fillThe 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.
• strokeThe 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 visibility properties do not affect event processing.
• allThe 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.
• 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.

Example

<ul>

  <li><a href="https://www.cssportal.com">CSS Portal</a></li>

  <li><a href="http://example.com">example.com</a></li>

</ul>

a[href="http://example.com"]
{
  pointer-events: none;
}

Browser Support

The following table will show you the current browser support for the CSS pointer-events property.

Desktop
12	1	1.5	9	4

Tablets / Mobile
18	4	14	3.2	1	2

Last updated by CSSPortal on: 3rd January 2024