CSS3 屬性 pointer-events 介紹

今天無意中看到一個 CSS3 屬性 pointer-event 可用來對滑鼠點擊部份做特別處理(底下為 hover)， 也許將來用的到，就先記下來，範例中HTML <svg><rect> 後使用 pointer-events: stroke ; 其它功能屬性還有 visible、visibleFill、painted、all 等等，可參考 OXXO 的 http://www.oxxostudio.tw/articles/201409/pointer-events.html。

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:stroke;
}

#test:hover{
  fill:#09f;
}