Question

我有一个链接显示鼠标悬停的div。在鼠标移出时我再次隐藏div。然而，如果用户在打开之后从不鼠标悬停，那么它会保持打开状态，所以我需要在一段时间后隐藏div。由于这些是2个元素（链接和div），我认为我不能使用.hover。我怎么能最好写这个来隐藏.tooltip-profile 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秒的超时。到达时，超时将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

如果鼠标再次出现在链接上或工具提示不隐藏工具提示，请在此期间使用setleout等待一段时间。

      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;

   });

如果没有鼠标隐藏

2 个答案: