Question

我正在尝试构建一个按钮（下面给出的代码中的#nav_float_menu_button），当鼠标移过它时将绘制一个菜单。到目前为止，这么好 - 但是当我试图离开第1项并下到第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>

Answer 1

你可以像这样实现mouseleave

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

此处的工作示例 - http://jsfiddle.net/9yEHV/304/

在您的代码中，只要您移开输入，mousehover事件就会结束。这是因为mousehove事件不是菜单代码的一部分。为防止菜单消失，您需要在标记周围创建一个封装器/容器，它封装了输入和菜单。

希望这是有道理的

Answer 2

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

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

Mouseout事件无法按预期工作

2 个答案: