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

【问题标题】：issue with color transition on hover and mouse speed悬停和鼠标速度上的颜色过渡问题
【发布时间】：2018-12-27 21:37:57
【问题描述】：

我在 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;
}

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

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

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

【问题讨论】：

标签： css performance hover mouse transition

【解决方案1】：

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

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

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

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

您可能会尝试添加一个额外的事件侦听器（hover 事件在 .letter 之上通过 Javascript）并将两者配对，但否则我认为您不会找到加速 mousemove 注册的有效解决方案在特定的浏览器上。

希望这会有所帮助！

【讨论】：