穿透的 div ( pointer-events )

pointer-events是一個滿有趣的CSS3屬性，雖然主要是針對SVG ，但其中幾個屬性應用在div上也是頗有意思。顧名思義，這是一個針對鼠標滑動事件的屬性，預設值為auto，若值為none，則可以穿越該元素，點擊到下方的元素。除了auto和none，這是完整的屬性列表：pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit，除了auto與none，其他都是控制SVG的屬性，若采用預設值，則SVG就是以visiblePainted來表現。

首先看到  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 下方的東西，就可以做出許多應用喔！真是迫不及待想要用用看啦！