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

Question

我在 firefox 和 chrome 上遇到颜色过渡问题，具体取决于鼠标经过每个元素时的速度。我有一个 Logo ，我想在鼠标光标经过它们时立即更改每个字母的颜色，然后通过渐变过渡恢复原始颜色。问题是，当您过快地穿过 Logo 时，一些字母会被丢弃并且不会触发动画。我在 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;
}

这是一个代码笔:https://codepen.io/anon/pen/gjLrrZ

只需快速将鼠标水平移动到 LOGO 上，您就会明白我的意思。

所以问题是，我应该用 JavaScript 来做吗？因为 CSS 应该有更好的性能，对吗？

Answer 1

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

您遇到的是鼠标移动得太快，mousemove 事件无法在每个 Logo 字母的顶部注册。

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

CSS 将具有最佳性能，您是对的。

您可以尝试添加一个额外的事件监听器(通过 Javascript 在 .letter 之上的 hover 事件)并将两者配对在一起，但除此之外我不认为您将找到一种有效的解决方案来加速特定浏览器上的 mousemove 注册。

希望这对您有所帮助!