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?

Solution 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>

Demo: http://jsfiddle.net/4gQkT/

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.