pointer-events
< css | properties
pointer-events
Summary
The pointer-events property allows you to control whether an element can be the target for the pointing device (e.g, mouse, pen) events.
Overview table
| Initial value | auto
|
|---|---|
| Applies to | all elements |
| Inherited | Yes |
| Media | visual |
| Computed value | the specified value |
| Animatable | No |
| CSS Object Model Property | pointerEvents
|
Syntax
-
pointer-events: auto -
pointer-events: stroke -
pointer-events: none -
pointer-events: all -
pointer-events: visiblePainted -
pointer-events: visibleFill -
pointer-events: visibleStroke -
pointer-events: visible -
pointer-events: painted -
pointer-events: fill
Values
- auto
- In HTML/XML content, this value and the value all have the same effect. In SVG content, this value and the value visiblePainted have the same effect.
- none
- The element is never the target of pointer events, although pointer events may target its descendant elements if those descendants have the
pointer-eventsset to some other value.
- all
- The element may be the target element for pointer events whenever the pointer is inside the CSS border edge of the element.
- visiblePainted
- For SVG only. The element can only be the target of a pointer event when the
visibilityproperty is set to visible and when the pointer is over the interior (i.e., 'fill') of the element or the perimeter (i.e., 'stroke') of the element, and thefill,strokeproperty is set to a value other than none.
- visibleFill
- For SVG only. The element can only be the target of a pointer event when the
visibilityproperty is set to visible and when the pointer is over the interior (i.e., fill) of the element.
- visibleStroke
- For SVG only. The element can only be the target of a pointer event when the
visibilityproperty is set to visible and when the pointer is over the perimeter (i.e., stroke) of the element.
- visible
- The element may be the target of pointer events when the
visibilityproperty is set to visible, and the pointer is over the contents, background, or border of the element (or in SVG, over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element).
- painted
- For SVG 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 or the perimeter (i.e., 'stroke') of the element, and the
fill,strokeproperty is set to a value other than none.
- fill
- For SVG 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.
- stroke
- For SVG 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.
Examples
The first a element have the pointer-events property set to none, any pointer events (i.e., mouse over, click) do not happen.
HTML
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Pointer-events example</title> <link href="pointer-events.css" type="text/css" rel="stylesheet"> </head> <body> <p><a href="http://docs.webplatform.org" id="one">webplatform.org(none)</a></p> <p><a href="http://docs.webplatform.org" id="two">webplatform.org(all)</a></p> </body> </html>
CSS
#one{
pointer-events: none;
}
#two{
pointer-events: all;
}
View live exampleSVG demo of two intersecting circles
{see jsbin for the full source}
Notes
The pointer-events property used to be in the CSS 3 UI specification, but it has been postponed to CSS 4 due to many open issues.
Related specifications
| Specification | Status | Related Changes |
|---|---|---|
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) | W3C Recommendation |
Compatibility
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| For HTML | 2.0 | 3.6 | Unsupported | Unsupported |
4.0
|
| For SVG | 1.0 | 1.5 | 9.0 | 9.0 |
3.0 |
Mobile
| Feature | Android | BlackBerry | Chrome for mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Opera Mini | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| For HTML | 2.1 | 7.0 | 18.0 | 18.0 | ? | Unsupported | Unsupported | 3.2
|
| For SVG | 3.0 | 7.0 | 18.0 | 18.0 | ? | 10.0 | 5.0 | 3.2 |
Note: The pointer-events property used to be in the CSS 3 UI specification, but it has been postponed to CSS 4 due to many open issues.
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here