마우스를 숨기는 요소?

Question

는 다음 코드

$("#nav-mail").mouseenter(function(){ 
    $("#dropdown_mail").show(); 
}); 

$("#dropdown_mail,#nav-mail").mouseleave(function(){ 
    $("#dropdown_mail").hide(); 
}); 

이 있고 난 내가 할 필요가 작동하지 않는의 #의 탐색 메일 영역에게 #dropdown_mail의 가죽을 떠날 때 그러나, 그것으로 드롭 다운을 만들려고하고 있어요 # nav-mail에서 #dropdown_mail로 이동할 수 있습니다.

그래서 어떻게하면 # nav-mail에서 #dropdown_mail으로 건너 가서 마우스를 놓을 때만 닫을 수 있습니까?

HTML

<div id="navbar"> 
    <!-- Navigation --> 
    <ul> 
     <li id="current"><a href="dashboard.php" class="nav-dashboard">Dashboard</a></li> 
     <li><a href="client.php" class="nav-client">Client</a></li> 
     <li><a href="how-it-works.php" class="nav-system">System</a></li> 
     <li id="nav-mail"><a href="service-plans.php" class="nav-mail">Mail</a></li> 
    </ul> 
    <!-- End Navigation --> 
</div> 

<div id="dropdown_mail"> 
    <ul> 
     <li><a href="email_templates.php">Email Templates</a></li> 
    </ul> 
</div> 

Answer 1

변경 mouseentermouseover 및 숨기기 전에 timeout을 설정합니다. 사용자가 여전히이 지역에있는 경우 timeout이 삭제됩니다. 예 :

var MailTimeout; 

function hideMailDropdown() { 
    $("#dropdown_mail").hide(); 
    clearTimeout(MailTimeout); 
} 

$(document).ready(function() { 
    $("#nav-mail").mouseover(function(){ 
    $("#dropdown_mail").show(); 
    clearTimeout(MailTimeout); 
    }); 

    $("#dropdown_mail,#nav-mail").mouseleave(function(){ 
    var MailTimeout=setTimeout("hideMailDropdown()",500); /* Wait half a second before hiding */ 
    }); 
});