[CSS] pointer-events

keywords: cursor, pointer, z-index

pointer-events 最一開始是用在 SVG 的情況下，當同一個圖案由很多圖層疊加再一起時，透過 pointer-events 可以選擇哪些圖層是可以透過點擊來操作效果。

後來在 HTML 的元素上，當不同圖層疊在一起的時候（例如，z-index），也可以過 pointer-events 讓使用者穿過上面的圖層，點擊到下方的子元素。

• There’s no reason to use pointer-events for HTML elements @ bitsofcode

範例

讓滑鼠可以穿越上方元素，點擊到子層的內容

**在想要可以被穿越的上層元素加上 pointer-events: none; ，**此時這個元素將會變層視覺上在上面，但滑鼠點擊會穿透的情況。

有些時候下層元素可能會繼承到外層的 pointer-events: none，如果有這種情況，在希望被點擊的元素上記得要加上 pointer-events: auto。

See the Pen Use pointer-events to make children elements clickable by PJCHEN (@PJCHENder) on CodePen.