The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events (like hovering and clicking).

The none Value

When you set pointer-events: none; on an element, the element is never the target of pointer events. Interestingly, pointer events may target its descendant elements if those descendants have pointer-events set to some other value (like auto).

This creates a "ghost-like" effect where clicks pass right through the element to whatever is underneath it.

Common Use Cases

• Overlays: Placing a visual gradient or texture over content without blocking the ability to select text or click buttons underneath.
• Custom Cursors: If you create a custom cursor using a DIV that follows the mouse, you must set pointer-events: none on it so it doesn't block interactions with the page.
• Disabling Buttons: While disabled attribute is better for HTML forms, pointer-events: none can visually and functionally disable links or other elements.

auto vs none

Use auto (default): When the element should behave normally and respond to clicks, hovers, etc.

Use none: When the element should be ignored by the mouse, allowing interactions to pass through to elements behind it.