Question

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

在JS Fiddle上跳转到它，或者看下面的代码段：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的供应商前缀？（改变这个并没有解决我的问题，无论如何......）

我已经尽力在这里搜索现有问题，以解决这个问题，但没有运气。欢迎任何帮助！

Answer 1

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

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

了解更多信息：

悬停转换仅适用于Chrome中的第一个实例

1 个答案: