1. css
  2. /properties
  3. /pointer-events

pointer-events

Definition

The pointer-events property in CSS allows you to control whether an element can be the target of mouse events such as click, hover, and drag. It can be used to disable mouse events on certain elements or to make elements behave as if they were part of the background and ignore mouse events. The property has several values that allow you to control the mouse event behavior of the element.

Examples

Disable mouse events on an element:

.element {
  pointer-events: none;
}

Enable mouse events on an element:

.element {
  pointer-events: auto;
}

Make an element ignore mouse events and behave as if it were part of the background:

.element {
  pointer-events: background;
}

Values

ValueDescription
autoThe element can be the target of mouse events.
noneThe element cannot be the target of mouse events and mouse events are passed through to the element below it.
visiblePaintedThe element can be the target of mouse events only if the pointer is over a visible part of the element.
visibleFillThe element can be the target of mouse events only if the pointer is over the visible fill of the element.
visibleStrokeThe element can be the target of mouse events only if the pointer is over the visible stroke of the element.
visibleThe element can be the target of mouse events only if it has a visible outline or fill.
paintedThe element can be the target of mouse events only if it has a visible outline, fill, or text decoration.
strokeThe element can be the target of mouse events only if it has a visible outline or stroke.
allThe element can be the target of all mouse events.

Best Practices

  • Use this property sparingly and only when necessary, as disabling mouse events can make your website or application less accessible and harder to use.
  • Test your content on different devices and in different browsers to ensure that it works as expected and is accessible to users with different abilities and input devices.
  • Be careful when using the none value, as it can make it difficult for users to interact with your content. If you must use this value, ensure that there is an alternative way for users to interact with the content.
  • Use the appropriate value for your use case. For example, if you want an element to be clickable only when it has a visible fill, use the visibleFill value.
  • Avoid using pointer-events to fix layout or overlapping issues, as there are usually better solutions to those problems.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes
  • Support for the visiblePainted and visibleStroke values is limited to certain browsers, and the background value is not supported in all browsers. Therefore, it's important to test your content in different browsers and versions to ensure that it works as expected.