2018年6月3日 星期日

CSS 的穿透屬性- pointer-events

這屬性最近用到覺得很方便,主要是當 html 上有兩個東西疊在一起時,hover 到上面那個後,下面的就無法偵測到 hover 事件。



當我們把上面那一個 div 修改屬性為 pointer-events:none 時,下面的就可以 hover 了。


這個屬性給 svg 可以玩得更多,完整的屬性說明如這篇文章介紹:

auto
pointer-events 未指定時的預設屬性,對於SVG内容,該值与visiblePainted效果相同
none
元素永遠不會成為滑鼠事件的target。但是,當其後代元素的pointer-events屬性指定其他值時,滑鼠事件可以指向後代元素,在這種情况下,滑鼠事件將在捕獲或冒泡階段觸發父元素的事件真聽器。

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



最近有用在台灣制縣地圖上,就不會因為文字疊在圖片上點不到了。

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...