0

次のシナリオを想像してみてください: 複数の項目 (ところでは wordpress メニュー) を持つメニューがあり、その下にいくつかのリンクを含む白いバーを表示したいと考えていますが、それは特定のメニュー項目の上にカーソルを置いたときだけです。次に、メニュー項目を離れて、メニューのすぐ下にある白いバー自体にカーソルを合わせると、その中のリンクをクリックできるようにする必要があるため、まだそこにあるはずです。白いバーは、マウスがメニュー項目の上にも、白いバー自体または含まれる要素の上にも移動しない場合にのみ、再びフェードアウトする必要があります。

これが私が思いついたものです：

$("#menu-item-62").hover(function(){ //this is the menu item
    $(".white_bar_artists").show(); //this is the white bar that shall be shown
}, function(){
    if(!$(".white_bar_artists").is(":hover")){ //the white bar should only disappear, if the user hovers neither over it nor the menu item
        $(".white_bar_artists").hide();
    }
});

ここまでは順調ですね。唯一の問題は、白いバー自体からマウスを離したときではなく、メニュー項目からマウスを離したときにのみ白いバーが再び消えることです。これが、次のコードを追加した理由です。

$(".white_bar_artists").find("*").mouseout(function(){
    $(".white_bar_artists").hide();
    $(".white_bar").show();
});

興味深いことに、以前find("*")は白いバー内のすべての要素を取得していましたが、そのうちの 1 つにカーソルを合わせるとすぐに白いバーが消えてしまいました。それでも、この 2 番目のコード群は、メニュー項目からホバリングしたときだけでなく、白いバーを非表示にするために必要なようです。

次の 2 つの要件を満たすように、いずれかのコード スニペットを改善するにはどうすればよいですか。

  • メニュー項目と白いバー自体にカーソルを合わせると、白いバーが表示されたままになります
  • 白いバーは、それ自体、含まれる要素の 1 つ、およびメニュー項目の上にマウスを移動しないと消えます。
4

1 に答える 1

1

ホバー アクションも白いバーにバインドします。メニュー項目は、ホバー トリガーの非表示を失いますが、白いバーには、その時点までにホバーがトリガーされて表示されます。

$("#menu-item-62, .white_bar_artists").hover(function(){
    $(".white_bar_artists").show(); //this is the white bar that shall be shown
}, function(){
    $(".white_bar_artists").hide();
});​

2 つの要素が表示されているため、マウスは隙間なく一方から他方に移動できます。

于 2012-11-25T15:56:20.777 に答える