Mouseout事件不按預期方式工作

我試圖在按鈕（下面給出的代碼中的#nav_float_menu_button）中生成一個鼠標移過它時將繪製菜單的按鈕。到目前爲止，這麼好 - 但是當我嘗試從項目＃1移開並且轉到項目＃2或更低時，菜單消失。Mouseout事件不按預期方式工作

如何讓菜單保持在屏幕上，直到鼠標移出其區域？

<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>

來源

2013-12-12 S R

嘗試，其氣泡（不知道這是關乎您的問題） –

你可以實現鼠標離開像這樣

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

在這裏工作的例子 - http://jsfiddle.net/9yEHV/304/

在您的代碼中，只要移開輸入，mousehover事件就會結束。這是因爲mousehove事件不是你的菜單代碼的一部分。爲了防止菜單消失，您需要在標記的周圍創建一個封裝器/容器，它封裝了輸入和菜單。

希望這是有道理使用OnMouseLeave在事件而不是

來源

2013-12-12 11:57:44 heymega

這工作。謝謝！ :) –

您可以檢查是否鼠標在菜單上你的隱藏功能：

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

來源

2013-12-12 11:55:50

Mouseout事件不按預期方式工作

回答

相關問題