midCSS
How do pointer-events work in CSS?
Updated Apr 28, 2026
Short answer
The pointer-events property dictates under what circumstances a graphic element can be the target of mouse or touch events.
Deep explanation
Setting pointer-events: none makes the element entirely 'click-through', meaning hover states, active states, JS click listeners, and cursor changes will bypass it and trigger on the element beneath it. Setting it back to auto restores normal behavior.
Real-world example
Placing a decorative gradient overlay or floating particle effect over a clickable UI without blocking the user's ability to click the buttons beneath.
Common mistakes
- Disabling pointer-events on a parent and wondering why interactive child buttons stop working.
Follow-up questions
- Can a child override pointer-events: none set on its parent?