1

これは単純なはずです。インライン リスト内の 4 つのリンクされた 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