html - 动画元素上的悬停状态

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 功能，并且是从网页唯一移动的部分是光标的时候开始设置的，因此让 hover 不断检查光标是否在上方是没有意义的元素，这是处理器浪费，并且在页面上的元素不移动的时候会被认为是过度的。

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

无法立即更新 CSS 行为本身，因为站点设计者几乎无法对其进行编码，因此使用 javascript 是您唯一真正的解决方案。

您可以将此报告为错误，但这可能只会作为新的选择器功能(例如 :HoverUpdate [不太可能] 或将与CSS4 (我不知道 CSS4 的状态，如果相关人员真的没有注意到这一点，那么它甚至可能是 CSS5 的东西)。

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

重点是，它不是浏览器本身可以或应该完全修复的东西，而是应该在 W3C 规定的 CSS 本身的定义/代码中修复。

另一方面，那些使用鼠标的用户移动它们的次数太多(即使只是一两个像素)，以至于您在游戏之外的情况有些可疑，鼠标需要处于卡住位置并且要不断检查悬停选择器，正如您似乎已经完成的那样，我认为使用 Javascript 滚动它可以将其作为相对边缘情况处理，并且在几年内 CSS4 可能有一个内置的解决方案。

后续步骤

• 向每个浏览器构建者报告 Bug
• 将功能请求报告给 W3C，将其作为 CSS-4 规范
• 可能会探索是否有办法获取浏览器插件来解决此问题(同样，随意)。
• 使用 Javascript。