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

Posted 2023-05-08

技术标签:

【中文标题】悬停和鼠标速度上的颜色过渡问题【英文标题】：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 应该有更好的性能，对吗？

【问题讨论】：

【参考方案1】：

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

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

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

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

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

希望这会有所帮助！

【讨论】：