浏览器供应商似乎以非常破碎的方式实施: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年了？
答案 0 :(得分：4)
hover是一个相对较旧的CSS功能，是从网页的唯一移动部分是光标的时候开始设置的，因此没有任何意义在悬停时不断检查光标是否超出项目，这是处理器浪费，并且在页面上的元素没有移动的时候会被认为是过度的。
而是在光标移动时检查光标是否在元素上。这远不如你所说的那样适合移动属性，但从代码编写的角度来看确实有意义，当编写它时，不需要考虑元素移动的替代问题。
没有办法立即更新CSS行为本身，因为这几乎是网站设计者无法识别的，因此使用javascript是您唯一真正的解决方案。
您可以将此报告为错误，但这可能只会被更正为新的选择器功能，例如:HoverUpdate [不太可能] 或将会出现CSS4 （我不知道CSS4的状态，如果真的没有被与之相关的人注意到，那么它甚至可能是CSS5的东西）。
在运行中或以非集中方式更改hover的核心行为时存在各种问题 - 主要是每个不同的浏览器引擎可能以不同方式调整更改不同的版本（我们已经发现Firefox有点偶然地处理:hover选择器）。
关键是，浏览器本身不能或应该彻底修复它，但应该在W3C所规定的CSS本身的定义/代码中修复。
另一方面，那些有老鼠的用户将它们移动得那么多（甚至只是一两个像素），这对于你在游戏之外的情况有些疑问，因为游戏需要让鼠标处于冻结状态并且对于悬停选择器的持续检查，正如您似乎已经完成的那样，我认为使用Javascript滚动可以将其作为一个相对边缘案例来处理，并且在几年内CSS4 可能< / em>有一个内置的解决方案。
后续步骤