Mouseleave隐藏元素？

Question

我有以下代码

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

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

我试图用它创建一个下拉列表，但是当我离开#nav-mail区域时，#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

将mouseenter更改为mouseover，并在隐藏前设置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 */
  });
});