Is it possible for the child of a div set to pointer-events: none to have pointer events?

html

event-delegation

pointer-events

css-magic

byAnton Shumikhin·Feb 24, 2025

Not really, BUT there's a trick. You can create a pseudo-sibling positioned as if it's nested. Set pointer-events: none; in parent and pointer-events: auto; in pseudo-child. Here’s your cheat code:

<div style="pointer-events: none; position: relative;">
    <!-- Pretends to not care about your clicks -->
</div>
<div style="position: absolute; top: 0; left: 0; pointer-events: auto;">
    <!-- Oh, so you think you can touch me? Go ahead. -->
    Click me
</div>

Twist the arm of the pseudo-child with position: absolute right after the parent. Use pointer-events: auto to get back the feels. It's sibling, but looks like a beautiful child who accepts clicks.

Deep dive into pointer-events

Understanding pointer-events is key. It can be a game changer or a party pooper depending upon how you wield it. Here's the scoop:

pointer-events: auto overrides the none of parent.
CSS class magic helps manage style and maintenance. Inline can get dirty, use class.
pointer-events: all is for the SVG club. Don't crash the party with HTML.
Browser compatibility is a serious relationship. Check regularly, it might break your heart.

Mastering nested elements

Nested elements are like Russian Dolls, one inside another with pointer-events putting up quite a show. Here's the backstage pass:

Parental control: If parent's got pointer-events: none, child can't override. We all know, parents have the last say.
Sibling rivalry: Stacked siblings? The one on top with pointer-events: auto grabs the attention.
Event Delegation: It's JavaScript's secret party. Capture events on parent, act on child.

Perfect the art of organizing UI Comic-Con with these tips.

Problems? Here's your hammer

Facing issues? Don't flip the table. Here's the DIY kit:

Event Bubbling: Pointer events act like a cap on bubbling. No place to vent for your frustrated JS listeners.
Consistency is key: Test in all browsers. Your CSS might behave like a flirt.
Visual Feedback: If element can't interact, it should show. Don't give mixed signals.

explain-codes / Html / Is it possible for the child of a div set to pointer-events: none to have pointer events?

Linked

What does the * * CSS selector do?



How to affect other elements when one element is hovered



Can you have a <span> within a <span>?



How to style the parent element when hovering a child element?



Target a CSS class inside another CSS class

