css指针悬停_CSS指针事件

css指针悬停

The responsibilities taken on by CSS seems to be increasingly blurring with JavaScript. Consider the -webkit-touch-callout CSS property, 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中越来越模糊。 考虑-webkit-touch-callout CSS属性 ，当您按住可点击元素时，该属性可防止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属性就能做到这一点！

View Demo 观看演示

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 to auto, the click event will fire the designated functionality. Basically, the click event respects the pointer-events value.

  如果将click事件侦听器添加到元素，然后删除pointer-events样式(或将其值更改为auto ，则click事件将触发指定的功能。基本上，click事件尊重pointer-events值。

View Demo 观看演示

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 -可以通过控制台简单地删除样式！

翻译自: https://davidwalsh.name/pointer-events

css指针悬停