动画元素的悬停状态

Question

浏览器厂商似乎以非常错误的方式实现了:hover：他们只有在鼠标移动时才更改元素状态，但是元素移动（CSS动画等）时不会更改。因此，假设您单击具有使其变亮的:hover规则的元素，并且通过单击触发了移动该元素离开鼠标指针的CSS动画，该元素仍然保持在:hover状态，这当然是完全错误的。

我现在已经在一个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周期来不断检查页面上所有元素的悬停状态的争论。然而，正如我所说，我已经在JavaScript中实现了这个功能，并且将其放在了requestAnimationFrame回调函数中，我没有注意到任何可衡量的性能下降。如果这是在浏览器引擎内部实现的话，肯定不会对性能产生任何影响。既然已经到了2015年，难道浏览器供应商不应该正确地实现这个功能吗？

- instinctive

---

请发布一些代码以便查看您的问题。我知道您的意思，但为了开始测试，有一个起点是很有用的。 - Bram Vanroy

@Paran0a 不，我认为他的意思是像这样。确实，当你悬停在一个元素上，它移开后，悬停状态仍然存在。我也感到惊讶。 - Bram Vanroy

@Paran0a，你看不到吗？我看到了问题，也许是你的浏览器自动更正了它？尝试使用Bram的jsfiddle链接来展示一个更好的例子，虽然你的例子也显示了这个问题。当底层内容移动时但鼠标没有移动，悬停状态不会更新以再次检查它是否仍然正确，并相应地调整CSS。 - Martin

Firefox没有这个问题，或者只有其中的一部分：当你拿我的fiddle，并将鼠标放在你知道div会经过的地方时，div不会在光标下面时立即改变颜色。只有当你的鼠标位置移动到div时才会发生这种情况。如果你停止移动鼠标，Firefox 会在div通过后立即删除悬停状态。 - Bram Vanroy

绝不是说这是一个重复的问题，但这里有一个相关的项目 - https://dev59.com/sY_ea4cB1Zd3GeqPVfqh#33065723。它没有答案，但我评论只是为了留下两个线程之间的链接，以便未来的用户可以跟进。 - Harry

Answer 1

hover 是 CSS 的一个相对较旧的功能，它是在网页唯一移动的部分是鼠标指针时设置的，因此没有必要让 hover 不断检查光标是否悬停在元素上，这样会浪费处理器，而在页面元素不移动的时代，这种做法可能会被认为过度。

相反，它会在光标移动时检查光标是否悬停在元素上。这对于移动属性来说不太合适，但从编写代码的角度来看是有道理的，当编写该功能时，无需考虑元素移动的替代问题。

不能立即更新 CSS 行为本身，因为这基本上是超出站点设计人员控制范围的，因此使用 javascript 是您唯一的解决方案。

您可以将其报告为错误，但这可能只会在新的选择器能力（如 :HoverUpdate 【不太可能】）或 CSS4 中得到纠正 （我不知道 CSS4 的状态，如果与之相关联的人还没有注意到这一点，那么它甚至可能是 CSS5 事情）。

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

关键是，这不是浏览器本身可以或应该干净地修复的事情，而应该在 CSS 自身的定义/代码中进行修复，由 W3C 设定。

另一方面，在游戏之外，那些使用鼠标的用户会不停地移动鼠标（即使只有一个像素），因此你的情况值得商榷，需要鼠标处于冻结状态并且 hover 选择器需要不断检查，就像你已经做的那样，我认为使用 Javascript 可以作为处理这种相对边缘情况的方法，而在几年后 CSS4 中 可能 会有内置解决方案。

下一步

• 向每个浏览器构建者报告错误
• 向 W3C 报告特性请求，将其作为 CSS-4 规范
• 如果有办法让浏览器插件解决此问题（同样是随意的），则可能要探索一下。
• 使用 Javascript。

- Martin