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

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

CSS:

.parent {
  pointer-events:none;        
}
.child {
    pointer-events:all;
}

HTML:

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

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.

Related