Question

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 beta中修复。但是，如果您遇到此问题，请访问下面接受的答案中链接的错误报告，并解决问题。

Answer 1

@Nijikokun我可以确认同样的事情。：访问过的链接在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

Answer 2

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

看来如果你声明：访问过的颜色（颜色，背景，边框颜色等）是透明的，它将作为一种解决方法。我还没有进行过广泛的测试，很高兴收到反馈。

Answer 3

这不是一个非工作的问题，它是：访问链接没有转换，所以如果你没有点击它可能对你有用，但如果你有，它不会。

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

Answer 4

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

对网络开发者的影响

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

（...）

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

Answer 5

Darren Kovalchik在他的asnwer（https://stackoverflow.com/a/33443757/2589276）中写道，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; }
}

当然，如果设置链接的父级颜色是一个问题，这种解决方法是行不通的，但在其他所有情况下，它都提供了一个简单而干净的解决方案。

Answer 6

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

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

希望有所帮助：）

Answer 7

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

Answer 8

如果您从访问行为中删除颜色，那么它应该按预期工作。当颜色设置为：访问行为时，偶数：悬停颜色（没有过渡）不能按预期工作。

Answer 9

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

我能够通过使用:link伪类来修复它：

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

#menu a:hover {
  color: black;
}

CSS3颜色过渡在Chrome中无效

9 个答案: