0

私のページには画像ギャラリーがあります。画像とギャラリーのナビゲーションがあります:次と前のボタン。デフォルトでは、ナビゲーションは非表示になっていますが、マウス カーソルが画像の右半分にある場合、次のボタンが表示されます ( :hover css セレクター)。次のボタンは、ナビゲーション ボタンを含むアニメーションを引き起こします。問題は、アニメーションの終了後に画像の右半分がホバリングされないことです。次のボタンを表示するには、マウス操作を実行する必要があります。だからここに私の質問があります：アニメーションの終了後にホバーセレクターを「トリガー」する方法はありますか？

注： jQueryを使用してこの問題を解決できると思いますが、 :hover$(...).hover(in, out)に影響を与える可能性のあるより基本的な解決策があるかどうか疑問に思っています。結局のところ、このセレクターはこの目的にははるかに便利です。

4

1 に答える 1

2

数時間いじり、何人かの友人の助けを借りて、以前よりも優れた解決策を思いつくことができました. このアプローチでは、ホバーされた要素の前に透明な要素を使用し、要素を表示するためにギャラリーと同じホバー イベントを展開しwidth:0px; height:0px;て発生させます。このアプローチを使用すると、マウスがページ上のどこにあっても表示されますが、アニメーションが完了した後にのみ表示されます。width:10000px; height:10000px;nextnext

更新されたデモはこちら

body { overflow:hidden; }
#hoverHelper {
    width:0px;
    height:0px;
    z-index:1;
    position:absolute;
    margin-top:-1000px;
    margin-left:-1000px;
    animation: hhAnimation .001s 3s forwards;
}
#actualHover {
    width:50px;
    height:50px;
    background:teal;
    animation: yourAnimation 3s linear forwards;
}
#next {
    z-index:2;
    position:relative;
    display: none;
}
#actualHover:hover ~ #next, #hoverHelper:hover ~ #next, #next:hover {
    display:inline-block;
}
@keyframes yourAnimation {
    0% { background:teal; }
    100% { background: red; }
}
@keyframes hhAnimation {
    0% { width:0px;
         height:0px;
}
100% { width:10000px;
       height:10000px;
     }
}

そしてHTML（#next他のものの後にあることを確認してください）

<div id='actualHover'></div>
<div id='hoverHelper'></div>
<a id='next'>Next</a>

また、小さな JavaScript を追加して、繰り返し使用できるようにし、アクセス方法を示しました。

ソリューションは完全にクロスブラウザでなければなりません。それについての唯一の否定的なことは、overflow:hiddenjavascriptを使用して現在のウィンドウの高さ/幅を決定し、それをそれに設定する（サイズ変更を含む）または同様のものによってさらに最適化できる本体にあります

于 2013-10-18T14:21:48.730 に答える