今天無意中看到一個 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;
}
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;
}
留言
張貼留言