(1)pointer-events是css3的一个属性,指定在什么情况下元素可以成为鼠标事件的target(包括鼠标的样式)
(2)pointer-events 属性有很多值,但是对于浏览器来说,适用于HTML
元素的只有三个值
,其它的几个值都是针对SVG元素
的(本身这个属性就来自于SVG技术,是一个SVG属性,并未在任何CSS规范中定义)。
(3)适用于HTML
元素的三个值
pointer-events: auto | none | inherit ;
- auto:默认值,表示指针事件已启用;此时元素会响应指针事件,阻止这些事件在其下面的元素上触发。
效果和没有定义pointer-events
属性相同,鼠标不会穿透当前层none
:表示在元素上禁用指针事件;此时该元素将不响应指针事件,但它下面的元素可以响应指针事件,就像元素不存在于它们之上一样。inherit
:表示该元素将从其父级继承其pointer-events
值。
(4)适用于svg值
pointer-event:visiblePainted
只适用于SVG元素,元素只有在以下情况才会成为鼠标事件的目标:
① visibility属性值:visible,且鼠标指针在元素内部,且fill属性值非none
② visibility属性值:visible,鼠标指针在元素边界上,且stroke属性值非none
pointer-event:visibleFill
只适用于SVG元素,元素只有在以下情况才会成为鼠标事件的目标:
① visibility属性值:visible,且鼠标指针在元素内部
pointer-event:visibleStroke
只适用于SVG元素,元素只有在以下情况才会成为鼠标事件的目标:
① visibility属性值:visible,且鼠标指针在元素边界
pointer-event:visible
只适用于SVG元素,元素只有在以下情况才会成为鼠标事件的目标:
① visibility属性值:visible,且鼠标指针在元素内部或边界
pointer-event:fill
只适用于SVG元素,元素只有在以下情况才会成为鼠标事件的目标:
① 只有鼠标指针在元素内部时
pointer-event:stroke
只适用于SVG元素,元素只有在以下情况才会成为鼠标事件的目标:
① 只有鼠标指针在元素边界上时
pointer-event:stroke
只适用于SVG元素,元素只有在以下情况才会成为鼠标事件的目标:
① 只有鼠标指针在元素内部或边界时
(5)使用场景
例如:
1、需要穿透当前层
2、禁用 HTML 元素的 hover/focus/active 等动态效果