穿透的 div ( pointer-events )

首先看到 pointer-events: auto，就是我們一般常見的，一個 div 被另外一個 div 遮住，就無法進行點擊或 hover 的動作，如下圖：

HTML：

<div class="ybox"></div>

<div class="gbox"></div>

CSS：

.ybox {

  background: rgba(255, 200, 0, .8);

  margin: 20px;

  z-index: 3;

}

.gbox {

  background: rgba(0, 220, 170, .8);

  margin: -80px 40px 20px;

  z-index: 2;

}

.gbox:hover{

  background: rgba(255, 50, 50, .8);

}

這時候如果我們把 ybox 增加 pointer-events: none;，就會發現底下的 gbox 可以 hover 了！

至於其他的屬性，在這邊稍微做一些介紹，根據這篇的解釋，可以知道其他屬性是這樣解釋：

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 屬性的值不影響事件處理。

例如我們畫面中有一個 SVG 所繪製的矩形，就可以控制讓滑鼠移到邊框變色，或是移到填滿區域才變色，這是設為 fill 的結果：

HTML：

<svg width="200" height="140">

  <rect width="100" height="100" fill="#f00" stroke="#000" stroke-width="10" x="20" y="20" id="test"></rect>

</svg>

CSS：

#test {

  pointer-events: fill;

}

#test:hover {

  fill: #09f;

}

如果改設為 stroke 就會變成這樣：

這就是 pointer-events 的用法，其實搞懂之後，因為可以點擊到被覆蓋的 div 下方的東西，就可以做出許多應用喔！真是迫不及待想要用用看啦！

巴特西

穿透的 div ( pointer-events )

最新文章

热门文章