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

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

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

autopointer-events 的預設值,效果如圖示:

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


pointer-events:none

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

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

更多

pointer-events 的屬性並不只有 autonone 而已,只是對於 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 功能: