pointer-events
Whether the element reacts to mouse clicks and taps, or lets them pass to what is below.
Syntax
pointer-events: none;Values
| Parameter | Type | Description |
|---|---|---|
| auto | keyword | Reacts as usual (the default). |
| none | keyword | Clicks pass through the element to the elements behind it. |
Examples
A decorative overlay that does not block the button:
<style>
.wrap { position: relative; }
.overlay {
position: absolute; inset: 0;
background: rgb(255 255 255 / 0.3);
pointer-events: none;
}
</style>
<div class="wrap">
<button onclick="this.textContent = 'Clicked!'">Click me through the overlay</button>
<div class="overlay"></div>
</div>Notes
pointer-events: none does not disable keyboard access: a button can still be focused with Tab and pressed with Enter. To really disable a control, use the disabled attribute.
See also
- cursor — The look of the mouse pointer over the element.
- position — How an element is positioned: in the normal flow or by offsets.
- user-select — Whether the user can select the text of an element.
Related recipes
In the tutorial
- Overflow and layers — What to do when content does not fit into a block — overflow, scrolling, an ellipsis — and how z-index decides which element lies on top.