将动画元素悬停状态
浏览器供应商似乎实现了:hover
以非常破碎的方式:hover
:它们只在鼠标移动时改变元素状态,而不是 元素移动时(CSS动画等)。 所以说,如果你点击一个具有悬停规则的元素,使其点亮,并且通过点击触发一个将元素从鼠标指针移开的CSS动画, 元素仍然处于:悬停状态 ,这当然是完全错误的。
我现在在requestAnimationFrame
回调函数中实现了自己的mouseover处理,在这里我检查所有元素与鼠标位置,但严重的是,这不是必须的? 没有办法解决: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>
hover
是一种相对较旧的CSS功能,并且是在网页唯一移动部分是光标时设置的,所以没有必要经常检查光标是否位于该项目之上,这是处理器浪费的情况,而且会是在页面上的元素没有移动的时候被认为是过度的。
而是在光标移动时检查光标是否位于元素上方。 这对于移动属性来说不太合适,正如你所说的,但是从编写代码的角度来看是有意义的,当它被写入时,不需要考虑元素移动的替代问题。
没有办法立即更新CSS行为本身,因为这是网站设计人员无法实现的,因此使用javascript
是唯一真正的解决方案。
你可以报告这是一个错误,但这可能只会被纠正为新的选择器能力,例如:HoverUpdate
[不太可能]或将与CSS4出来(我不知道CSS4的状态,如果这真的没有被那些与之相关的人注意到,那么它甚至可能是CSS5的东西)。
有很多问题需要改变飞行或非集中式hover
的核心行为 - 主要是每个不同的浏览器引擎都可能以不同的方式和不同的版本适应变化(我们已经发现Firefox处理:hover
选择器有点随意)。
关键是,它不是可以或应该由浏览器自己完全修复的东西,但应该在W3C规定的CSS本身的定义/代码中解决。
另一方面,那些有鼠标的用户会将它们移动到非常多的位置(即使只是一个或两个像素),以至于在游戏之外有些可疑的情况是有问题的,因为这需要鼠标处于冻结位置,悬停选择器要经常检查,因为你似乎已经完成了,我认为使用Javascript
进行滚动可以将此视为相对边缘的情况,并且在几年后CSS4可能会有内置解决方案。
下一步