Mouseout 事件未按预期工作答案

【问题标题】：Mouseout event not working as expectedMouseout 事件未按预期工作
【发布时间】：2026-02-17 09:20:06
【问题描述】：

我正在尝试构建一个按钮（下面给出的代码中的#nav_float_menu_button），当鼠标移到它上面时会绘制一个菜单。到目前为止，一切都很好 - 但是当我尝试离开 Item#1 并下降到 Item#2 或更低时，菜单消失了。

如何让菜单在鼠标移出其区域之前一直停留在屏幕上？

<div id="nav_float_menu" style="position:absolute;top:2px;right:30px;display:none;z-index:1400;border-style:solid" onmouseover="keepShowing()" onmouseout="hideMenu()">
    <input type=button class=SignBtn style="width:15em;border-radius:15px" value="Item1"><br>
    <input type=button class=SignBtn style="width:15em;border-radius:15px" value="Item2" ><br>
    <input type=button class=SignBtn style="width:15em;border-radius:15px" value="Item3"><br>
</div>

<input type=button id="nav_float_menu_button" style="position:absolute;top:2px;right:30px;z-index:1000" value="Menu" class=flatBtn onmouseover="toggleNavMenu()">

<script type="text/javascript">
function toggleNavMenu()
{
    if($("#nav_float_menu").is(':hidden'))
    {
        $("#nav_float_menu").show();
    }
    else
    {
        //$("#nav_float_menu").hide();  
    }
}

function keepShowing()
{
    $("#nav_float_menu").show();
}

function hideMenu()
{
    $("#nav_float_menu").hide(500); 
}
</script>

【问题讨论】：

尝试使用 onmouseleave 事件，它会冒泡（不确定是否与您的问题有关）

标签： jquery html menu show-hide onmouseout

【解决方案1】：

你可以像这样实现 mouseleave

$("#menucontainer").mouseleave(function () {
    $("#menu").slideUp('slow');
});

这里的工作示例 - http://jsfiddle.net/9yEHV/304/

在您的代码中，鼠标悬停事件在您离开输入后立即结束。这是因为 mousehove 事件不是菜单代码的一部分。为了防止菜单消失，您需要在标记周围创建一个包装器/容器，用于封装输入和菜单。

希望这是有道理的

【讨论】：

【解决方案2】：

您可以检查鼠标是否在隐藏功能的菜单上：

function hideMenu()
{
    if(!$('#nav_float_menu').is(":hover")) {
        $("#nav_float_menu").hide(500); 
    }
}

【讨论】：