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

概述浏览器供应商似乎实现了：以一种非常破碎的方式悬停：它们只在鼠标移动时改变元素状态,而在元素移动时不改变(CSS动画等).因此,如果您单击具有：hover规则使其亮起的元素,并通过单击触发将元素移离鼠标指针的CSS动画,该元素仍将保持在：悬停状态,这当然是完全错误的. 我现在在requestAnimationFrame回调中实现了我自己的鼠标悬停处理,在那里我检查所有元素对抗鼠标位置,但严重的是,这 浏览器供应商似乎实现了：以一种非常破碎的方式悬停：它们只在鼠标移动时改变元素状态,而在元素移动时不改变(CSS动画等).因此,如果您单击具有：hover规则使其亮起的元素,并通过单击触发将元素移离鼠标指针的CSS动画,该元素仍将保持在：悬停状态,这当然是完全错误的.

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

完整示例：

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年吗？

解决方法 悬停是一个相对较旧的CSS功能,是从网页的唯一移动部分是光标的时间开始设置的,所以没有任何意义在悬停时不断检查光标是否超出项目,这是处理器浪费,并且本来是在页面上的元素没有移动的时候被认为是过度的.

而是在光标移动时检查光标是否在元素上.这远不如你所说的那样适合移动属性,但从代码编写的角度来看确实有意义,当编写它时,不需要考虑元素移动的替代问题.

没有办法立即更新CSS行为本身,因为这几乎是网站设计者无法识别的,所以使用JavaScript是你唯一真正的解决方案.

您可以将此报告为错误,但这可能只会被更正为新的选择器能力,如：HoverUpdate [不太可能]或将出现CSS4(我不知道CSS4的状态,如果这真的没有有人注意到它,那它甚至可能是一个CSS5的东西).

改变悬停的核心行为或以非集中的方式改变核心行为存在各种问题 – 主要是每个不同的浏览器引擎可能以不同的方式和不同的版本调整更改(我们已经发现firefox处理：悬停选择器有点随意).

关键是,它不是可以或应该由浏览器本身清晰修复的东西,而是应该在W3C所规定的CSS本身的定义/代码中修复.

另一方面,那些有老鼠的用户将它们移动得那么多(甚至只是一两个像素),这对你在游戏之外的情况有些质疑,因为游戏需要鼠标处于冻结状态并且需要悬停选择器要经常检查,就像你似乎已经完成的那样,我认为使用JavaScript进行滚动可以将其作为一个相对边缘的情况来处理,并且在几年内CSS4可能有一个内置的解决方案.

下一步

>向每个浏览器构建器报告错误>向W3C报告功能请求,将其作为css-4规范>可能会探索是否有办法让浏览器插件来解决这个问题(再次,偶然).>使用JavaScript.

总结

以上是内存溢出为你收集整理的html – 动画元素上的悬停状态全部内容，希望文章能够帮你解决html – 动画元素上的悬停状态所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。