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

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

I need the div that holds another div to allow pointer events to pass through, but for the div itself to still have events.

Is this possible?

javascript html css

Solution 1:^[1]

Yes, it's possible, and you basically just described how. Disable it for the parent and enable it for the child.

pointer-events is supported in almost every browser, including IE11

Please note that pointer-events: all is for SVG only.

For HTML, only auto and none are supported values.

.parent {
  pointer-events: none;
}

.child {
  pointer-events: auto;
}

<div class="parent">
  <a href="#">Parent</a>
  <div class="child">
    <a href="#">Child</a>
  </div>
</div>

On the child element's style, add

pointer-events: auto;

pointer-events: all didn't work for me, and apparently applies to SVG elements only.

As a possible solution in some cases you can set

height: 0;

to parent element and let child element to overflow

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.