0

マウスオーバーで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);
} );
4

2 に答える 2

0

マウスが再びリンク上にある場合、またはツールチップがツールチップを非表示にしない場合は、この間に 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;

   });
于 2012-10-31T21:04:58.453 に答える
0

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);
});
于 2012-10-31T21:00:31.990 に答える