仅在离开菜单包装器时触发 mouseleave答案

【问题标题】：Only trigger mouseleave when menu wrapper is leaved仅在离开菜单包装器时触发 mouseleave
【发布时间】：2015-04-28 01:20:27
【问题描述】：

我有一个非常基本的导航，有两个主菜单项。

当您将鼠标悬停在主菜单项 1 时，我会切换 #sub-menu1 的可见性。当您将鼠标悬停在主菜单项 2 时，我会切换 #sub-menu2 的可见性。

像这样：

$(".wrapper .main #m li").mouseenter(function() {
    var that = $(this);
    var menu = that.attr("class");

    if(menu == "first") {
        $("#s1").css("display","block");
        $("#s2").css("display","none");
    }

    if(menu == "second") {
        $("#s1").css("display","none");
        $("#s2").css("display","block");
    }
});

我的问题：我只想在离开主菜单或子菜单时触发mouseleave。我的目标是悬停我的主菜单项并能够在不触发mouseleave 的情况下将鼠标悬停在子菜单上。

这是我尝试过的：

$(".wrapper").mouseleave(function() {
    console.log("leave");

    $("#s1").css("display","none");
    $("#s2").css("display","none");
});

如您所见，mouseleave 在离开主菜单的同时触发。

http://jsfiddle.net/17krr02p/

HTML 是这样的：

<div class="wrapper">
    <div class="main">
        <ul id="m">
            <li class="first">main 1</li>
            <li class="second">main 2</li>
        </ul>
    </div>
    <div class="sub">
        <ul id="s1">
            <li>sub 1-1</li>
            <li>sub 1-2</li>
            <li>sub 1-3</li>
        </ul>
        <ul id="s2">
            <li>sub 2-1</li>
            <li>sub 2-2</li>
            <li>sub 2-3</li>
        </ul>
    </div>
<div>

【问题讨论】：

标签： jquery mouseleave mouseout

【解决方案1】：

我做了一个工作fiddle-

首先，您的 CSS 存在一些问题：放置 absolute 定位会使元素“脱离流程”；

然后为了解决你在mouseleave上遇到的问题，为了实现到达子菜单（因为你有一个差距）我应用了一点延迟。

【讨论】：