css指针悬停
The responsibilities taken on by CSS seems to be increasingly blurring with JavaScript. Consider the , which prevents iOS's link dialog menu when you tap and hold a clickable element. The pointer-events
property is even more JavaScript-like, preventing:
CSS所承担的责任似乎在JavaScript中越来越模糊。 考虑 ,当您按住可点击元素时,该可防止iOS的链接对话框菜单。 pointer-events
属性更像JavaScript,可以防止:
- click actions from doing anything 从任何动作中点击动作
- the default cursor pointer from displaying 显示的默认光标指针
- CSS hover and active state triggering CSS悬停和活动状态触发
- JavaScript click events from firing 触发JavaScript点击事件
One CSS property is capable of doing just that!
一个CSS属性就能做到这一点!
CSS (The CSS)
The pointer-events
property can have many values, but many of them are only applicable to SVG*: auto
, none
, visiblePainted*
, visibleFill*
, visibleStroke*
, visible*
, painted*
, fill*
, stroke*
, all*
, and inherit
. The none
value prevents the click, state, and cursor actions:
该pointer-events
属性可以有多个值,但其中不少是只适用于SVG *: auto
, none
, visiblePainted*
, visibleFill*
, visibleStroke*
, visible*
, painted*
, fill*
, stroke*
, all*
和inherit
。 none
值防止单击,状态和光标操作:
.disabled { pointer-events: none; }
A few quick notes about pointer-events
:
关于pointer-events
一些简短说明:
If children of the element have
pointer-events
explicitly enabled, clicks will be allowed on those child elements.如果该元素的子级具有明确启用的
pointer-events
,则将允许在这些子元素上单击。If you add a click event listener to an element, then remove the
pointer-events
style (or change its value toauto
, the click event will fire the designated functionality. Basically, the click event respects thepointer-events
value.如果将click事件侦听器添加到元素,然后删除
pointer-events
样式(或将其值更改为auto
,则click事件将触发指定的功能。基本上,click事件尊重pointer-events
值。
I first noticed pointer-events used on the Firefox Marketplace website for disabled buttons. A bonus in this case is styleability; think about how awful elements with the disabled
attribute look! Of course, don't use pointer-events
on elements that could trigger critical functionality -- the style can simply be remove via the console!
我首先注意到Firefox Marketplace网站上用于禁用按钮的指针事件。 在这种情况下,奖金是可样式性; 考虑一下具有disabled
属性的可怕元素的外观! 当然,不要在可能触发关键功能的元素上使用pointer-events
-可以通过控制台简单地删除样式!
翻译自:
css指针悬停