Search code examples
javascripthtmlcss

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?

Solution

  • 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/