ビジュアルはこちら: http://cl.ly/image/2L3g1d0W1r1Y
テキストは問題なくフェードしますが、左側の画像は瞬時に表示され、テキストと同時にフェードアウトしません。すべてのブラウザで同時にフェードインするにはどうすればよいですか? Chrome では問題なく動作するようですが、Firefox や Safari では動作しません。
何が起こっているのか少し混乱していますが、私のhtmlは次のとおりです。
<ul class="action">
<li><a class="visit-site" href="http://google.com">Visit Site</a></li>
<li><a class="back-to-top" href="#portfolio">Back to top</a></li>
</ul>
そしてここにcssがあります：
ul.action a.visit-site {
background: transparent url('../images/arrow-small-right-rest.png') no-repeat 0 2px;
padding-left: 18px;
color: #57585a;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
transition: 0.5s all ease;
-o-transition-duration: 0.5s all ease;
}
ul.action a.visit-site:hover {
background: transparent url('../images/arrow-small-right-over.png') no-repeat 0 2px;
color: #3ee1df;
}
スプライトあり:
ul.action a.back-to-top{
background: transparent url('../images/sprite.png') no-repeat 0 2px;
padding-left: 18px;
width: 13px;
height: 13px;
color: #57585a;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
ul.action a.back-to-top:hover{
background-position: 0 -63px;
color: #3ee1df;
}