YouTip

## CSS pointer-events property **CSS** **pointer-events** --- ## Definition and Usage The pointer-events property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events. | Default value: | auto | | :--- | :--- | | Inherited: | yes | | Version: | CSS3 | | JavaScript syntax: | *object*.style.pointerEvents="none" | --- ## Browser Support The numbers in the table specify the first browser version that fully supports the property. | Property | | | | | | | :--- | :--- | :--- | :--- | :--- | :--- | | pointer-events | 1.0 | 4.0 | 3.5 | 3.1 | 9.0 | --- ## CSS Syntax ```pointer-events: auto|none|visiblePainted|visibleFill|visibleStroke|visible| painted|fill|stroke|all|inherit;``` ## Property Values | Value | Description | | :--- | :--- | | auto | Default. The element reacts to mouse events normally | | none | The element does not react to mouse events | | visiblePainted | **Only for SVG.** 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) or the perimeter (i.e., stroke) of the element | | visibleFill | **Only for SVG.** 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 | | visibleStroke | **Only for SVG.** 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 | | visible | **Only for SVG.** 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 either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element | | painted | **Only for SVG.** The element can only be the target of a mouse event when the mouse cursor is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The `visibility` property can be hidden or visible | | fill | **Only for SVG.** 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. The `visibility` property can be hidden or visible | | stroke | **Only for SVG.** The element can only be the target of a mouse event when the mouse cursor is over the perimeter (i.e., stroke) of the element. The `visibility` property can be hidden or visible | | all | **Only for SVG.** The element can only be the target of a mouse event when the mouse cursor is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The `visibility` property can be hidden or visible | | inherit | Inherits this property from its parent element | --- ## More Examples ### Example Disable hovering on the <a> element: a.disabled { pointer-events: none; } [Try it Yourself »](#) --- ## Related Pages CSS tutorial: (#) HTML DOM reference: (#) --- ## Comments 0% [What is the difficulty level of this page?](javascript:void(0)) [Previous:](#) (#) [Next:](#) (#) --- ## Color Generator * [What is the difficulty level of this page?](javascript:void(0)) * (javascript:void(0)) © (#) (#) (javascript:void(0)) ( (javascript:location.reload()) (#)