浏览器厂商似乎以非常错误的方式实现了: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年,难道浏览器供应商不应该正确地实现这个功能吗?