如果沒有鼠標隱藏

Question

我有一個鏈接，顯示鼠標懸停div。 在鼠標移出後，我再次隱藏div。 但是，如果用戶從未將鼠標懸停在div上，那麼它將保持打開狀態，因此我需要在一定時間後隱藏div。 由於這些是2個元素（鏈接和div），我不認爲我可以使用.hover。我最好怎麼寫這個來隱藏.tooltip配置文件10秒後沒有鼠標懸停？

$("#profile").mouseenter(function(){ 
var position = $(".tooltip-profile").offset(); 
$(".tooltip-profile").css({ position: "absolute", left: "720px", top: "-110px" }); 
$(".tooltip-profile").fadeIn(500); 
}); 
$(".tooltip-profile").mouseleave(function(){ 
$(".tooltip-profile").fadeOut(500); 
}); 

Answer 1

您需要提供的回調函數，你fadeIn()定義的10秒的超時值。如果鼠標又是鏈接或提示不要隱藏工具提示在此期間

$("#profile").mouseenter(function() { 
    var position = $(".tooltip-profile").offset(); 
    $(".tooltip-profile").css({ 
     position: "absolute", 
     left: "720px", 
     top: "-110px" 
    }); 
    $(".tooltip-profile").fadeIn(500, function() { 
     setTimeOut(function() { 
      $(".tooltip-profile").fadeOut(500); 
     }, 10000); 
    }); 
}); 
$(".tooltip-profile").mouseleave(function() { 
    $(".tooltip-profile").fadeOut(500); 
}); 

Answer 2

等待使用的鼠標離開的setTimeout一段時間：當到達，超時將​​的元素。

 var keepOpend ; 
    $("#profile").mouseenter(function(){ keepOpend = true; 
     var position = $(".tooltip-profile").offset(); 
     $(".tooltip-profile").css({ position: "absolute", left: "720px", top: "-110px" }); 
     $(".tooltip-profile").fadeIn(500); 
    }).mouseleave(function(){ 
      keepOpend = false; 
      setTimeout(function(){ 
      !keepOpend && $(".tooltip-profile").fadeOut(500); 
     }, 500); 
    }); 
    $(".tooltip-profile").mouseleave(function(){ 
      keepOpend = false; 
      setTimeout(function(){ 
      !keepOpend && $(".tooltip-profile").fadeOut(500); 
     }, 500); 
    }).mouseenter(function(){ 
     keepOpend = true; 

    });