[CSS] pointer-events

滑鼠拖拽元素移動，算是一個稍微有點點複雜的交互。 而在本文，我們就將打破常規，向大家介紹一種超強的僅僅使用純 CSS 就能夠實現的滑鼠點擊拖拽效果。

pointer-events 是一個 CSS 屬性，用於控制元素對滑鼠事件（例如點擊、滑入等）的反應方式。 這個屬性可以設置在 HTML 元素上，它接受以下幾個可能的 ...

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

透過 CSS pointer-events 樣式屬性，可以在元素互相重疊時，穿透上層元素藉此點擊到下層元素，這篇教學會介紹 CSS pointer-events 樣式屬性在 SVG 元素與非 SVG 元素的差異，以及如何製作「穿透」的點擊或懸停 ( hover ) 效果。

我們在很多時候其實是需要在網頁中設定滑鼠效果的，有些是自動生成的，例如一個link鏈接，那麼滑鼠移上去自動會變成一個手的樣子去點擊，有時候一個input輸入框，那麼滑鼠就自動變成一個英文大寫I的樣子，那麼我們是否可以將更多物件設定成我們 ...

此時可以應用CSS的屬性「pointer-events」，它是針對滑鼠事件的屬性，預設值為auto，若設定值為none時，則可以穿越該元素。