悬停过渡仅适用于 Chrome 中的第一个实例答案

【问题标题】：Hover transition only working on first instance in Chrome悬停过渡仅适用于 Chrome 中的第一个实例
【发布时间】：2013-07-30 16:31:20
【问题描述】：

这应该是一件简单的事情：一个内联列表中有四个链接的 SVG，每个都在悬停时从灰色平滑过渡到彩色。但是，在 Chrome 中，只有我的列表中的第一项转换 - 其他项没有。对于 Firefox 中的所有项目，转换都按预期工作。

在 JS Fiddle 上跳转到它，或查看下面的 sn-ps：http://jsfiddle.net/chicgeek/NZpXs/1/

这是相关的 CSS：

.social svg {
  height: 60px;
  width: 60px;
}
.social path {
  fill: #ccc;
  -moz-transition: all .8s linear;
  -webkit-transition: all .8s linear;
  -ms-transition: all .8s linear;
  -o-transition: all .8s linear;
  transition: all .8s linear;
}
.social a:hover path.twitter {
  fill: #4099FF;
}
.social a:hover path.facebook {
  fill: #3B5998;
}
.social a:hover path.github {
  fill: #171515;
}
.social a:hover path.linkedin {
  fill: #0e76a8;
}

还有标记[截断]：

<section class="social">
  <ul>
    <li><a href="#" target="_blank">
      <svg ...>
      <path class="twitter" d="..."/></svg>
    </a></li>
    <li><a href="#" target="_blank">
      <svg ...>
      <path class="facebook" d="..."></path></svg>
    </a></li>
    <...>
  </ul>
</section>

:hover 样式按预期工作，但没有过渡。 Chrome 中的检查器显示 .social path 选择器很好（它们也都显示 fill: #ccc; 来确认这一点）。

我的选择器是否有问题，或者我如何将它们组合在一起？（也就是说，我哪里搞砸了？）
这是 Chrome 错误吗？如果是这样，解决方法是什么？
当我们这样做时，我还需要为transition 使用供应商前缀吗？（无论如何，改变这个并没有解决我的问题......）

我已尽我所能在这里搜索现有问题以找到解决方案，但没有运气。欢迎任何帮助！

【问题讨论】：

标签： google-chrome hover css-transitions

【解决方案1】：

进行更多调查，我确定这是一个已知的 Chrome 错误。 Chrome 似乎在将转换应用于访问过的链接方面存在问题。

对于上面的例子，它在隐身模式下总是无可挑剔的。

更多信息：

【讨论】：

这很有趣，因为小提琴适用于我的 chrome 28.0.1500.72 m
可能是因为您还没有访问过这些链接。 :) 单击一两个，然后重试。