jQuery/JS setTimeout/clearTimeout

Question

我不是很精通这个，但我有一个导航项目，在悬停时，带有搜索表单的div滑落。目前，当你鼠标悬停，然后鼠标悬停，div保持打开，直到你点击关闭按钮。

我试图让你在几秒钟后鼠标滑过div滑动备份，除非用户仍然在div或nav链接上（即他们正在填写搜索表单）。

这是我到目前为止有：

$("#services_link").mouseover(function() { 
     $("#services_link").css('background-position','left -73px'); 
     $("#vendors_dropdown").slideDown(function() { 
      setTimeout(HideMe, 4000); 
     }); 
    }); 

    function HideMe() { 
     $("#services_link").css('background-position','left 0'); 
     $("#vendors_dropdown").slideUp(); 
    } 

这让我作为var当成股利滑下链接的悬停，4秒后，向上滑动（无论在哪里，鼠标光标）。所以我只需要div保持打开，如果鼠标光标在链接或div上。

我看了3或4个其他类似的问题（和答案），没有真正相当的伎俩。 setTimeout（和clearTimeout）对我来说有点新，所以请原谅noob问题。 :)

Answer 1

绑定mouseenter和mouseleave。您需要在mouseleave上执行超时，但如果鼠标再次发生，则会重置它。

试着看着选定的答案here看看我在说什么。

事情是这样的：

var timeout; 
$("#services_link, #vendors_dropdown").mouseenter(function() { 
    window.clearTimeout(timeout); 
    $("#services_link").css('background-position','left -73px'); 
    $("#vendors_dropdown").slideDown(); 
}).mouseleave(function(){ 
    timeout = window.setTimeout(HideMe, 4000); 
}); 

function HideMe() { 
    $("#services_link").css('background-position','left 0'); 
    $("#vendors_dropdown").slideUp(); 
}