Skip to main content

[CSS] pointer-events

keywords: cursor, pointer, z-index#

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

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

範例#

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

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

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