时间戳

首页 > 解决方案 > 悬停和鼠标速度上的颜色过渡问题

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

问题描述

我在 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 应该有更好的性能，对吗？

标签： cssperformancehovermousetransition

解决方案

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

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

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

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

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

希望这可以帮助！

推荐阅读