CSS CSS3 颜色过渡在 Chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8490828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 color transition not working in Chrome
提问by Abhranil Das
The links in the left menu in this websitehave a CSS3 transition property of the color, which changes on mouse hover. It's not working in Chrome 16 or 17 (the color change is sudden), whereas other transitions in the website do. It works in Firefox, Opera, and even Safari, which uses webkit like Chrome, so I don't think it might be a problem with my CSS. What then?
本网站左侧菜单中的链接具有 CSS3 过渡属性 ，该属性color在鼠标悬停时发生变化。它在 Chrome 16 或 17 中不起作用（颜色变化是突然的），而网站中的其他过渡则可以。它适用于 Firefox、Opera 甚至 Safari，它使用像 Chrome 这样的 webkit，所以我认为这可能不是我的 CSS 的问题。然后怎样呢？
Here's my CSS of this part (the full CSS is here):
这是我这部分的 CSS（完整的 CSS 在这里）：
#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;
}
UPDATE!Apparently this has probably been fixed in 18 beta. However, if you have encountered this problem, please visit the bug report linked in the accepted answer below and star the issue.
更新！显然，这可能已在 18 测试版中修复。但是，如果您遇到此问题，请访问下面接受的答案中链接的错误报告并为问题加注星标。
回答by Darren Kovalchik
@Nijikokun I can confirm the same thing. :visited links do not transition correctly in Chrome. Hooray. It seems like this is an issue that cropped up in version 16 and never got fixed. There are a few bug reports open on the Chromium site.
@Nijikokun 我可以确认同样的事情。:visited 链接在 Chrome 中无法正确转换。万岁。似乎这是一个在版本 16 中突然出现并且从未得到修复的问题。Chromium 站点上打开了一些错误报告。
回答by álex Acu?a Viera
I tried to find a workaround (more details in my blog: http://kyuumeitai.posterous.com/the-case-of-the-chromes-transition-hover-bug)
我试图找到一种解决方法（更多详细信息在我的博客中：http: //kyuumeitai.posterous.com/the-case-of-the-chromes-transition-hover-bug）
It seems if you declare a:visited with color (color, background, border-color, etc) transparent it will work as a workaround. I haven't tested extensivelly yet, glad to receive feedback.
似乎如果您声明 a:visited with color (color, background, border-color, etc) transparent 它将作为一种解决方法。我还没有进行广泛的测试，很高兴收到反馈。
回答by diego nunes
. . I thought it would be nice to notice that this it not a bug, but intended behavior. Quoting the Mozilla Developer docs:
. . 我认为很高兴注意到这不是错误，而是预期的行为。引用Mozilla 开发人员文档：
Impact on web developers
Overall, this shouldn't affect web developers too significantly. There are, however, a few special cases that may require changes to sites:
(...)
CSS transitions won't be supported for visited links. Fortunately, CSS transitions are very new, and there are few sites using them at this point, so this isn't likely to impact many people at this point.
对 Web 开发人员的影响
总体而言，这不应该对 Web 开发人员产生太大影响。但是，有一些特殊情况可能需要更改站点：
（……）
访问过的链接不支持 CSS 转换。幸运的是，CSS 转换是非常新的，目前很少有网站使用它们，因此目前这不太可能影响很多人。
回答by Nijikokun
This is not a -non- working issue, what it is is the :visited link is not transitioning, so it may work for you if you have not clicked on it, but if you have, it will not.
这不是一个非工作问题，它是 :visited 链接没有转换，所以如果你没有点击它，它可能对你有用，但如果你有，它就不会。
I do not know a solution, I am still looking for one...
我不知道解决方案，我仍在寻找一个...
回答by Burnee
As Darren Kovalchik wrote in his asnwer ( https://stackoverflow.com/a/8524199/1010777), the Chrome has a bug on this.
正如 Darren Kovalchik 在他的 asnwer ( https://stackoverflow.com/a/8524199/1010777) 中所写，Chrome 对此有一个错误。
A possible workaround is to apply color animation on the parent element of the link, and set the link's color to inherit. In this case the animation works well even if the link is :visited.
一种可能的解决方法是在链接的父元素上应用颜色动画，并将链接的颜色设置为继承。在这种情况下，即使链接是 :visited，动画效果也很好。
html:
html：
<span class="whateverLinkParent">
<a href="#">whateverLinkText</a>
</span>
css:
css：
.whateverLinkParent { animation: whateverTextColorAnimation 1s infinite; }
.whateverLinkParent a { color: inherit; }
@keyframes whateverTextColorAnimation {
0%, 100% { color: #686765; }
50% { color: #2E2D2B; }
}
Of course this workaround can't work if setting the link's parent's color is a problem, but in every other cases it gives an easy and clean solution.
当然，如果设置链接的父级颜色有问题，则此解决方法不起作用，但在其他所有情况下，它都提供了简单而干净的解决方案。
回答by rovsen
If you remove color from :visited behavior then it should work as expected. When color is set in :visited behavior, even :hover color (without transition) does not work as expected.
如果您从 :visited 行为中删除颜色，那么它应该可以按预期工作。当颜色在 :visited 行为中设置时，即使 :hover 颜色（没有过渡）也不能按预期工作。
回答by sam
I still ran into the same issue and found a solution that worked for me.
我仍然遇到了同样的问题，并找到了一个对我有用的解决方案。
I was able to fix it by using the :linkpseudo class like this:
我能够通过使用这样的:link伪类来修复它：
#menu a, #menu a:link {
color: gray;
transition: color 0.5s;
}
#menu a:hover {
color: black;
}
回答by will
Try using #ccc and #000 rather than gray and black.
尝试使用 #ccc 和 #000 而不是灰色和黑色。
edit:Like so: http://jsfiddle.net/qtzEj/
编辑：像这样：http: //jsfiddle.net/qtzEj/
Hope that helps :)
希望有帮助:)
回答by popotan
Two of my link transition work, but the rest doesnt in chrome. They all use the same setting. It seems they work when the link is either mailto: or callto: -- oddly strange if you ask me.
我的两个链接转换工作，但其余的不在 chrome 中。它们都使用相同的设置。当链接是 mailto: 或 callto: 时，它们似乎工作： - 如果你问我，这很奇怪。
