1

这应该是一件简单的事情：一个内联列表中有四个链接的 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吗？（无论如何，改变这个并没有解决我的问题......）

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

4

1 回答 1

2

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

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

了解更多信息：

于 2013-07-30T15:24:08.773 回答