pointer-events cho phép một phần tử tiếp nhận sự kiện chuột hoặc không, đôi khi giúp giải quyết được vấn đề nan giải như sau:
CSS selector làm việc từ trên xuống (biết cha có thể tìm con) hay từ trái qua (biết một phần tử có thể tìm các em của nó) nhưng không có chiều ngược lại, thí dụ như không thể tìm tất cả các anh em của một phần tử.
<div id="parent"><div id="child1">Child 1</div><div id="child2">Child 2</div><div id="child3">Child 3</div></div>
Trong thí dụ trên, nếu phần tử con có sự kiện hover thì theo qui trình “nổi bọt” phần tử cha cũng có sự kiện hover. Khi đó từ phần tử cha, có thể chia các phần tử con thành 2 nhóm hover và không hover
#parent:hover > div:hover
#parent:hover > div:not(:hover)Ta muốn tránh tình huống phần tử cha hover nhưng không có phần tử con nào hover.
Với CSS thông thường thì không thể xử lý tình huống đó.
Ta có thể tắt pointer-events trên phần tử cha và bật pointer-events trên các phần tử con
<div id="parent" style="pointer-events:none"><div id="child1" style="pointer-events:auto">Child 1</div><div id="child2" style="pointer-events:auto">Child 2</div><div id="child3" style="pointer-events:auto">Child 3</div></div>
Khi đó phần tử cha chỉ nhận sự kiện do phần tử con truyền đến (nổi bọt), nó hover khi và chỉ khi có một phần tử con hover.