Chrome と Safari では、CSS トランジションがその子と.divisions a同様に適用されます。画像が大きくなり、キャプションがフェード インします。ただし、Firefox ではトランジションのみが行われ、子要素はトランジションなしで新しい状態にジャンプします。imgspan.divisions a
この質問が同じ問題かどうかはわかりませんでした。これが Firefox で修正できない場合、トランジションが子要素に適用されるように、そのブラウザーの回避策はありますか?
基本的な HTML:
<nav class="divisions">
<ul>
<li class="">
<a href="#"><img src="./images.png" alt="" width="150" height="150">
<span>Here's a caption</span></a>
</li>
</ul>
</nav>
関連する CSS (他にも、移行前のものがあります):
.divisions a, .divisions a img, .divisions a span {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.divisions a:hover {
height: 270px;
padding: 10px 0;
overflow: visible;
}
.divisions a:hover img {
width: 150px;
height: 150px;
}
.divisions a:hover span {
opacity: 1.0;
}