PJCHENder 未整理筆記

[CSS] pointer-events

2018-12-18

[CSS] pointer-events

@(CSS)[]

keywords: cursor, pointer, z-index

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

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

範例

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

**在想要可以被穿越的上層元素加上 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.

Tags: z-index

掃描二維條碼,分享此文章