javascript - jqueryでmouseoverとmouseleaveイベントを異なるターゲットに関連付ける方法は?

Question

jquery .hover 関数を使用して、マウスがボタンに入ったときにリストを表示しています。しかし、このリストにマウスを置いて要素を選択しようとすると、リストが消えてしまいます。.hover 関数がリストではなくボタンに関連付けられているためだと思います。では、mouseover イベントをボタンに、mouseleave イベントをボタンとリスト全体にそれぞれ関連付けるにはどうすればよいでしょうか。

Answer 1

.hovermouseenter と mouseleave を使用せずに、代わりに目的の要素にバインドする必要があります。

$(thelist).on("mouseleave",function(){
    // hide the list
});
$(thebutton).on("mouseenter",function(){
    // show the list
});

Answer 2

マウスをボタンからリストに移動した後、リストを表示し続ける必要があるかどうかを示す状態変数を使用します。

リストイベントのマウスオーバーにタイムアウトを設定すると、うまくいきます：

HTML

<input type="button" id="buttonId" value="hover" />
<ul id="list">
    <li>item1</li>
    <li>item2</li>
</ul>

CSS

#list {
    display: none;
}

JavaScript

var keepshowingList = false;
$('#buttonId').mouseover(function () {
    $('#list').show();
});
$('#buttonId').mouseleave(function () {
    setTimeout(function () {
        if (!keepshowingList) {
            $('#list').hide();
        }
    }, 150);
});
$('#list').mouseover(function () {
    keepshowingList = true;
});
$('#list').mouseleave(function () {
    keepshowingList = false;
    $(this).hide();
});

jsfiddle の例を参照してください