CSS3颜色过渡在Chrome中不起作用

Posted 2023-03-06

【中文标题】CSS3颜色过渡在Chrome中不起作用

【英文标题】：CSS3 color transition not working in Chrome

【发布时间】：2012-01-19 10:07:11

【问题描述】：

this website 左侧菜单中的链接具有color 的 CSS3 过渡属性，该属性会在鼠标悬停时更改。它在 Chrome 16 或 17 中不起作用（颜色变化是突然的），而网站中的其他过渡则可以。它适用于 Firefox、Opera 甚至 Safari，它使用像 Chrome 这样的 webkit，所以我认为这可能不是我的 CSS 的问题。然后呢？

这是我这部分的 CSS（完整的 CSS 是 here）：

#menu a

color: gray;
transition: color 0.5s;
-moz-transition:color 0.5s; /* Firefox 4 */
-webkit-transition:color 0.5s; /* Safari and Chrome */
-o-transition:color 0.5s; /* Opera */


#menu a:visited

color: gray;


#menu a:hover

color: black;

更新！显然这可能已在 18 测试版中得到修复。但是，如果您遇到此问题，请访问下方已接受答案中链接的错误报告并为问题加注星标。

【问题讨论】：

为我工作（Chrome 15）jsfiddle.net/Kyle_Sevenoaks/YJFqk/1

也适用于我的 Chrome 16。现在这是一个无赖。为什么相同的代码在我的网站上不起作用？

在您的网站上也适用于我 :) 尝试不使用测试版程序，它们并不总是那么稳定。

在任何地方都不适合我。尝试了最新的稳定版和最新的 Chrome 测试版。也可以使用 Google Web 字体。

@KyleSevenoaks：它最初可以工作，但如果你点击你的链接，它就会停止工作（因为链接变成了:visited）。

【参考方案1】：

@Nijikokun 我可以确认同样的事情。 :visited 链接在 Chrome 中无法正确转换。万岁。似乎这是一个在版本 16 中出现并且从未得到修复的问题。 Chromium 网站上有一些错误报告。

http://code.google.com/p/chromium/issues/detail?id=101245&q=visited%20transition&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Owner%20Summary

【讨论】：

+1。遇到问题后到达这里的开发人员请在此错误报告链接上对此问题加注星标，以便更认真地对待它。

Looks like it will be fixed with Chrome 18.

在 23.0.1271.60 beta-m 中仍然是同样的病态行为

谢天谢地，我找到了这个，真的开始让我发疯了，我以为我要脑死了，因为看起来改变链接的颜色是不可能的。感谢您的帖子 +1！！！

他们在 26 年修复了 :before 和 :after ，我认为 :visited 也是如此，至少它在链接的合并问题上这么说。

【参考方案2】：

我试图找到一种解决方法（我的博客中的更多详细信息：http://kyuumeitai.posterous.com/the-case-of-the-chromes-transition-hover-bug）

如果您声明 a:visited 的颜色（颜色、背景、边框颜色等）透明，它似乎可以作为一种解决方法。我还没有进行广泛的测试，很高兴收到反馈。

【讨论】：

您的演示适用于我，但它是 background 的过渡。我认为这个错误只发生在color。

您可以在相同颜色和更改不透明度之间进行过渡。

@ÁlexAcuñaViera 将颜色不透明度更改为 0 对我来说不起作用。背景工作正常。

【参考方案3】：

这不是一个无效的问题，它是 :visited 链接没有转换，所以如果你没有点击它可能对你有用，但如果你有，它不会。

我不知道解决方案，我还在寻找一个......

【讨论】：

我真的不认为这是我的问题。我清除了缓存，打开了一个新的隐身窗口等并再次尝试，但颜色仍然没有过渡。所以这不是一个 :visited 问题。我在另一页中看到了color 转换的这个问题，其中的变化再次在正常和:hover 之间。无论如何，在这个版本的 chrome 中，color 转换存在问题。

二国君的建议对我有用。我和你有同样的问题 Abhranil 并清除我的缓存使转换工作在未访问的链接上，无论是否有 Google Web Font。然而，所有访问过的链接都停止工作了。

@AbhranilDas 据说它已在版本 18 中修复。

@Nijikokun，是的，我在几周前更新了我的问题以包含该信息。

【参考方案4】：

。 .我认为很高兴注意到这不是错误，而是预期的行为。引用Mozilla Developer docs：

对网络开发者的影响

总的来说，这不会对网络开发人员造成太大影响。但是，有一些特殊情况可能需要更改网站：

(...)

已访问的链接不支持 CSS 过渡。幸运的是，CSS 过渡非常新，目前使用它们的网站很少，因此目前不太可能影响很多人。

【参考方案5】：

正如 Darren Kovalchik 在他的 asnwer (https://***.com/a/8524199/1010777) 中所写，Chrome 在这方面存在错误。

一种可能的解决方法是在链接的父元素上应用彩色动画，并将链接的颜色设置为继承。在这种情况下，即使链接是 :visited，动画也能正常工作。

html:

<span class="whateverLinkParent">
    <a href="#">whateverLinkText</a>
</span>

css:

.whateverLinkParent  animation: whateverTextColorAnimation 1s infinite; 
.whateverLinkParent a  color: inherit; 
@keyframes whateverTextColorAnimation 
    0%, 100%  color: #686765; 
    50%  color: #2E2D2B; 

当然，如果设置链接的父级颜色存在问题，则此解决方法无法工作，但在其他所有情况下，它都提供了一种简单而干净的解决方案。

【参考方案6】：

尝试使用#ccc 和#000，而不是灰色和黑色。

编辑： 像这样：http://jsfiddle.net/qtzEj/

希望有帮助:)

【讨论】：

不，没有 :-( 不过谢谢。顺便说一句，它可以在您的 Chrome 中使用吗？

是的，我在 beta 频道。但这就是这么简单...尝试重新启动 Chrome？我知道我的有时会在更新后中断过渡（尤其是 3d）...

我不认为这是问题所在，威尔。上面 Kyle 的示例使用了“灰色”和“黑色”，并且仍然可以在我的 Chrome 16 中使用。但不知何故，我网站上的相同代码却没有。

【参考方案7】：

我的两个链接转换工作，但其余的不在 chrome 中。它们都使用相同的设置。 当链接是 mailto: 或 callto: 时，它们似乎有效——如果你问我，这很奇怪。

【讨论】：

这是一个 Chrome 错误。请在其中一个答案中关注 Darren 的链接并为错误报告加注星标。而且由于您的帖子不是答案，因此最好添加诸如 cmets 之类的帖子。

【参考方案8】：

如果您从 :visited 行为中删除颜色，那么它应该可以按预期工作。在 :visited 行为中设置颜色时，即使 :hover 颜色（没有过渡）也无法按预期工作。

【参考方案9】：

我仍然遇到同样的问题并找到了适合我的解决方案。

我可以通过使用:link 伪类来修复它，如下所示：

#menu a, #menu a:link 
  color: gray;
  transition: color 0.5s;


#menu a:hover 
  color: black;