Question

我在firefox和chrome上出现颜色过渡问题，具体取决于鼠标经过每个元素时的速度。我有一个徽标，我想在鼠标指针经过它们时立即更改每个字母的颜色，然后通过淡入淡出的颜色恢复原来的颜色。问题是，当您过快地通过徽标时，会丢弃一些字母，并且不会触发动画。.FireFox和Chrome遇到了此问题，但Edge却没有。

这是HTML：

<div id="logo"><span class="letter">L</span><span class="letter">O</span><span class="letter">G</span><span class="letter">O</span></div>

和CSS：

#logo > .letter{
  font-size: 5em;
  color: red;
  transition: color .5s ease-in .2s; 
}

#logo > .letter:hover {
  color: black;
  transition: color 0s ease-in 0s;
}

这是一个codepen：https://codepen.io/anon/pen/gjLrrZ

只需将鼠标水平地放在LOGO上，您就会明白我的意思。

问题是，我应该使用JavaScript进行此操作吗？因为CSS应该有更好的性能，对吗？

Answer 1

我相信您实际上是在正确构建它。

您遇到的是鼠标移动太快，以至于mousemove事件无法在每个徽标字母上注册。

Edge可能在注册事件和触发CSS更改方面具有更好的性能。

CSS的性能最好，你是对的。

您可以尝试添加一个附加的事件侦听器（通过Javascript在hover上方的.letter事件中将两者配对），但是我认为您找不到有效的解决方案加快在特定浏览器上的mousemove注册。

希望这会有所帮助！

悬停和鼠标速度上的颜色过渡问题

1 个答案: