javascript - 如何将 mouseover 和 mouseleave 事件与 jquery 中的不同目标相关联？

Question

当您的鼠标进入按钮时，我正在使用 jquery .hover 函数来显示一个列表。但是，当我尝试将鼠标放入此列表并选择某个元素时，该列表会消失。我认为这是因为 .hover 函数与按钮而不是列表相关联。那么如何将 mouseover 事件与按钮相关联，将 mouseleave 事件与按钮和整个列表相关联呢？

Answer 1

您不需要使用.hover而是将 mouseenter 和 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();
});

See example on jsfiddle