CSS Pointer Events Generator

Control how HTML elements respond to mouse and touch events with pointer-events.

Pointer Events

Element can be the target of pointer events (default)

Try clicking or hovering over the boxes below:

Both boxes should respond to clicks and hovers.

pointer-events: auto;

Common Use Cases:

pointer-events: none — Disable clicks on overlays while allowing interaction with elements below
pointer-events: auto — Re-enable pointer events on child elements when parent has none
SVG-specific values control which parts of SVG elements respond to pointer events

Loading tool...