悬停在动画元素上的状态

Question

浏览器供应商似乎以:hover非常破碎的方式实现:它们仅在鼠标移动时改变元素状态,而在元素移动时不改变(CSS动画等).因此,如果您单击具有:hover规则使其亮起的元素,并通过单击触发将元素移离鼠标指针的CSS动画,该元素仍将保持在:悬停状态,这当然是完全错误的.

我现在已经在requestAnimationFrame回调中实现了我自己的鼠标悬停处理,在那里我检查所有元素与鼠标位置,但严重的是,这不是必要的吗？有没有办法解决:hover？

完整示例:

div {
  position: absolute;
  top: 5rem;
  left: 10rem;
  width: 3rem;
  height: 3rem;
  background: red;
  transition: left 0.5s;
}
div.moved {
  left: 30rem;
}
div:hover {
  background: green;
}

<div onclick="this.classList.toggle('moved')"></div>

我已经阅读了关于浪费CPU周期的评论中的参数,以便不断检查页面上所有元素的悬停状态.但是,正如我所说,我已经在requestAnimationFrame回调中的Javascript(!)中实现了这一点,而且我没有注意到性能有任何可测量的降低.当然,如果这是在浏览器的引擎中实现的,那么根本不会影响性能.浏览器供应商不应该正确实现这一点,现在它是2015年吗？

Answer 1

hover是一个相对较旧的 CSS 功能，并且是从网页唯一移动部分是光标的时候开始设置的，因此悬停不断检查光标是否在项目上是没有意义的，这是处理器浪费，并且会被考虑当页面上的元素没有移动时过多。

相反，它会在光标移动时检查光标是否位于元素上方。正如您所说，这对于移动属性来说不太合适，但从代码编写的角度来看确实有意义，编写代码时不需要考虑元素移动的替代问题。

没有办法立即更新 CSS 行为本身，因为这几乎是站点设计者无法触及的编码，因此使用javascript是唯一真正的解决方案。

您可以将其报告为错误，但这可能只会作为新的选择器功能（例如:HoverUpdate [不太可能]）得到纠正，或者将随 CSS4 一起出现（我不知道 CSS4 的状态，如果确实没有注意到这一点）与它相关的人，那么它甚至可能是 CSS5 的东西）。

hover动态或非集中方式更改核心行为存在各种问题- 主要是每个不同的浏览器引擎可能以不同的方式和不同的版本来适应更改（我们已经发现 Firefox 处理:hover选择器的方式有点随意） ）。

关键是，它不是浏览器本身可以或应该干净地修复的东西，而是应该按照 W3C 的规定在 CSS 本身的定义/代码中修复。

另一方面，那些使用鼠标的用户将鼠标移动得太多（甚至只是一两个像素），以至于在游戏之外您的情况有些可疑，因为需要将鼠标置于冻结位置并且悬停选择器要不断地进行检查，正如您似乎已经完成的那样，我认为 roll it withJavascript可以将其作为相对边缘情况来处理，并且几年后 CSS4可能会有一个内置的解决方案。

下一步

• 向每个浏览器构建者报告错误
• 向 W3C 报告功能请求，将其作为 CSS-4 规范
• 可能会探索是否有办法让浏览器插件来解决这个问题（再次，随意）。
• 使用 JavaScript。