Pointer Events Property
Last updated: 2026-09-13
pointer-events Pointer Events Property
The pointer-events property controls whether an element can become the target of pointer events such as clicks and hovers. When set to none, the element completely ignores pointer events and they pass through to elements below it. It is a common tool for click-through, disabling interaction, and complex layered UI interactions.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | Yes |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
pointer-events: auto | none;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | none | Keyword | Whether the element responds to pointer events |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| pointer-events | ✓ v1 | ✓ v12 | ✓ v1.5 | ✓ v4 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： pointer-events: none makes the element and all of its children ignore pointer events. To let a child respond again, you must set pointer-events: auto on that child explicitly.
Warning： pointer-events: none does not affect keyboard events or focus. The element can still be focused with the Tab key; combine it with tabindex="-1" to disable it completely.
❓ FAQ
QWhat is the difference between pointer-events: none and disabled?
Adisabled is an HTML attribute: besides blocking interaction, it changes the control's default styling, prevents form submission, and suppresses click events. pointer-events: none only makes the element ignore pointer events — its appearance stays the same, it can still be focused from the keyboard, and it still submits with the form. To fully disable a form control, prefer disabled.
QDoes the pointer-events: none value block touch events on mobile?
AYes. pointer-events: none treats every pointer input device the same, including mouse, stylus, and touchscreen. Once set, the element never becomes the target of a pointer event — clicks, taps, and hovers all pass through to the layer underneath. It does not affect keyboard events, though: the element can still be focused with Tab, so add tabindex="-1" to block that too.
QWhat is the difference between pointer-events: none and visibility: hidden?
Avisibility: hidden makes an element invisible and completely non-interactive, but it still occupies layout space, and children can be shown again with visibility: visible. An element with pointer-events: none stays visible, selectable, and focusable — it simply ignores pointer events, which then pass through to the elements below. Use the former to hide and the latter to let events pass through.
QHow do I make clicks pass through an overlay to the element below?
ASet pointer-events: none on the top overlay, and pointer events will pass through it to the element underneath. Typical cases: purely decorative overlays such as a semi-transparent veil added with ::before, annotation layers on maps, and custom tooltips. If the overlay contains buttons that must be clickable, restore pointer-events: auto on those buttons individually.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
