javascript - 如果没有鼠标悬停隐藏

Question

我有一个在鼠标悬停时显示 div 的链接。在鼠标移出时，我再次隐藏 div。但是，如果用户在打开后从不将鼠标悬停在 div 上，那么它会保持打开状态，所以我需要在一定时间后隐藏 div。由于这些是 2 个元素（链接和一个 div），我认为我不能使用 .hover。在没有鼠标悬停 10 秒后，我最好如何编写它来隐藏 .tooltip-profile？

$("#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 秒的超时。达到时，超时将fadeOut()元素：

$("#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

如果鼠标再次位于链接或工具提示上，请在此期间对 mouseleave 使用 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;

   });