css3 指针事件不在孩子身上？

Question

我有以下结构

<div class='offline'>some text <button class='delete'>Delete</button></div>

是否可以使用指针事件禁用 div: none but KEEP the button active ？

我试过

div.offline:not(.delete) {
    pointer-events: none;
}

没有成功。任何的想法 ？

Answer 1

您可以禁用父级上的事件并在子级上重新启用它们。

.parent {
  pointer-events: none;
}

.child {
  pointer-events: auto;
}

<div class='parent'>
  foo
  <button class='child'>bar</button>
</div>