Why pointer-events: none Can Break Your UI (Silently)

=> Why Click Events Suddenly Stop Working You write this: .overlay { pointer-events : none ; } And suddenly: 👉 buttons don’t click 👉 links don’t work 👉 UI feels broken => What pointer-events: none Actually Does It tells the browser: 👉 ignore all mouse interactions So: 👉 clicks pass through the element => Real Problem Scenario .card { position : relative ; } .overlay { position : absolute ; inset : 0 ; pointer-events : none ; } Now: 👉 overlay is visible 👉 but not clickable => Where It Gets Dangerous Sometimes parent has: .container { pointer-events : none ; } 👉 All child elements also stop receiving clicks => Why This Causes Bugs UI looks perfectly fine… 👉 but interactions fail This is one of the hardest bugs to detect. => When It’s Useful Use it for: decorative overlays animation layers visual effects => Fixing the Issue Enable interaction again: .button { pointer-events : auto ; } Or remove it if not needed. => What Developers Often Miss This property doesn’t change UI visually. 👉 onl