これに対する具体的な解決策を見つけることができなかったので、誰かが私を助けてくれることを願っています.
私は3つの画像を持っており、最初の画像から2番目、3番目の画像にマウスオーバーまたはホバーしてそこで停止し、マウスアウトで逆方向に循環させたいと考えています。
マウスオーバー | 元の画像 > 画像 2 > 画像 3 | 止まる
マウスアウト | 画像 3 > 画像 2 > 元の画像 | 止まる
JQueryを使用するのが最善だと思いますが、どんな解決策でも大歓迎です。
http://css3.bradshawenterprises.com/cfimg/
ここでのデモ 1 は 2 つの画像に対してかなりうまく機能しますが、画像には透明な領域があるため互いに重なっていますが、画像間のフェード効果は完璧です。
アップデート
そのサイトのデモ1に基づいて、CSSを使用してこれを行ったと思います。
#Logo {position:absolute; z-index: 1; width: 250px; height: 120px;}
#Logo:after {content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: url(images/Logo3.png); opacity: 0;
transition: opacity .5s ease-in-out;}
#Logo:hover:after {opacity: 1;
transition: opacity .5s .65s ease-in-out;}
#Logo img.A {position:absolute;
transition: opacity .5s .65s ease-in-out;}
#Logo img.A:hover {opacity: 0;
transition: opacity .5s ease-in-out;}
<div id="Logo"><img class="A" src="images/Logo.png"><img src="images/Logo2.png"></div>
これは私の目的にはかなりうまくいくようです。最初の画像がフェードアウトして 2 番目の画像だけが残り、3 番目の画像がフェードインします。次に、マウスアウトで逆に同じことを行います。しかし、これが最善の方法であるかどうか疑問に思っていましたか？または互換性の問題がある場合は？どんな助けでも大歓迎です。