CSS 的穿透屬性- pointer-events

這個屬性滿有趣的，知道的話用在一些地方其實很方便，這邊簡單的說明一下，以往我們如果像這樣有兩個區塊疊在一起，在下面那個就會感應不到，像這樣：

當我們把上面那一個 div 修改屬性為 pointer-events:none 時，下面的就可以感應到了，只是相對的上面那塊就不會有反應了。

 這個屬性給 svg 可以玩得更多，完整的屬性說明如這篇文章介紹:

auto
pointer-events 未指定時的預設屬性，對於SVG内容，該值与visiblePainted效果相同
none
元素永遠不會成為滑鼠事件的target。但是，當其後代元素的pointer-events屬性指定其他值時，滑鼠事件可以指向後代元素，在這種情况下，滑鼠事件將在捕獲或冒泡階段觸發父元素的事件真聽器。

visiblePainted
只適用於SVG。元素只有在以下情况才會成為滑鼠事件的目標：


visibility屬性值為visible，且滑鼠游標在元素内部，且fill屬性指定了none之外的值
visibility屬性值為visible，滑鼠游標在元素邊界上，且stroke屬性指定了none之外的值

visibleFill
只適用於SVG。只有在元素visibility屬性值为visible，且滑鼠游標在元素内部時,元素才會成為滑鼠事件的目標，fill屬性的值不影響事件處理。
visibleStroke
只適用於SVG。只有在元素visibility屬性值为visible，且滑鼠游標在元素邊界時,元素才會成為滑鼠事件的目標，stroke屬性的值不影響事件處理。
visible
只適用於SVG。只有在元素visibility屬性值为visible，且滑鼠游標在元素内部或邊界時,元素才會成為滑鼠事件的目標，fill和stroke屬性的值不影響事件處理。
painted
只適用於SVG。元素只有在以下情况才會成為滑鼠事件的目標：


滑鼠游標在元素内部，且fill屬性指定了none之外的值
滑鼠游標在元素邊界上，且stroke屬性指定了none之外的值

visibility屬性的值不影響事件處理。
fill
只適用於SVG。只有滑鼠游標在元素内部时,元素才會成為滑鼠事件的目標，fill和visibility屬性的值不影響事件處理。
stroke
只適用於SVG。只有滑鼠游標在元素邊界上時,元素才會成為滑鼠事件的目標，stroke和visibility屬性的值不影響事件處理。
all
只適用於SVG。只有滑鼠游標在元素内部或邊界時,元素才會成為滑鼠事件的目標，fill、stroke和visibility屬性的值不影響事件處理。