Interactivity

pointer-events

Setting whether an element reacts to pointer events.

Class	Declarations
`pointer-events:auto`	`pointer-events: auto;`
`pointer-events:visiblePainted`	`pointer-events: visiblePainted;`
`pointer-events:visibleFill`	`pointer-events: visibleFill;`
`pointer-events:visibleStroke`	`pointer-events: visibleStroke;`
`pointer-events:visible`	`pointer-events: visible;`
`pointer-events:painted`	`pointer-events: painted;`
`pointer-events:fill`	`pointer-events: fill;`
`pointer-events:stroke`	`pointer-events: stroke;`
`pointer-events:all`	`pointer-events: all;`
`pointer-events:<value>`	`pointer-events: <value>;`
`pointer-events:none`	`pointer-events: none;`

Examples

Use pointer-events:none when an overlay is visual only and should not block the control beneath it.

<div class="rel">    <button>Open</button>    <span class="abs inset:0 pointer-events:none"></span></div>

Generated CSS

@layer utilities {    .pointer-events\:none {        pointer-events: none    }}

untouchable is an alias for pointer-events:none and is useful for decorative icons and images.

<svg class="untouchable" aria-hidden="true">...</svg>

Combine a non-interactive parent with pointer-events:auto on a child that should still receive clicks.

<div class="pointer-events:none">    <button class="pointer-events:auto">Dismiss</button></div>

Apply styles based on different states using selectors and conditional queries.

<div class="pointer-events:none:hover pointer-events:auto@sm pointer-events:auto@print">...</div>

Setting what a browser does when reaching the boundary of a scrolling area.

Setting whether an element is resizable.