ZWH ZONE

[CSS]穿透的 div ( pointer-events )

zhiwei. huang -

pointer-events

pointer-events 為控制滑鼠目標的 CSS3 屬性:

The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events.

雖說大部分為製作 SVG 時使用，不過在特定情況時在 div 上使用也是可以的

製作穿透的 div

穿透的 div 這需求非常常見，例如：連結上著遮罩，或是製作選單在展開前把選單藏在畫面上，都是用的到的

使用 pointer-events 很容易就可以達到我們想要的效果

pointer-events:auto

auto 為 pointer-events 的預設值，效果如圖示：

就是我們一般常見的，一個 div 被另外一個 div 遮住，就無法進行點擊或 hover 的動作

pointer-events:none

再來我們幫上面 div 的增加 pointer-events: none 的屬性，如圖示：

如此一來就可以達到我們要的 穿透 效果了

更多

pointer-events 的屬性並不只有 auto 與 none 而已，只是對於 div 元素，只有這兩個屬性會有對應的效果，其餘屬性都於 SVG 中使用

如下：

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

如果想進步了解 pointer-events 可以參考此篇 文章

Facebook 功能：