Mouseout 이벤트가 예상대로 작동하지 않습니다.

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

당신은 너무

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

여기 예를 들어 작업처럼하는 MouseLeave를 구현할 수 - http://jsfiddle.net/9yEHV/304/

코드에서 입력을 끝내자 마자 mousehover 이벤트가 종료됩니다. 이것은 mousehove 이벤트가 메뉴 코드의 일부가 아니기 때문입니다. 메뉴가 사라지지 않게하려면 입력 및 메뉴를 캡슐화하는 마크 업 주위에 래퍼/컨테이너를 만들어야합니다.

희망이 의미를 거품 대신 onmouseleave 이벤트를 사용

Answer 2

마우스가 당신의 숨기기 기능의 메뉴에있는 경우 당신은 확인할 수 있습니다

이

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