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

November 21, 2022 by Tarik

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>