jquery - 只要用户将鼠标放在另一个 div 上，就可以防止 div 消失

Question

当用户将光标放在 时，以下代码使.fixed-toolbar、.fixed-submit和出现和消失：.fixed-toggle.fixed-toolbar

 $(document).on("mouseover", ".fixed-container", function(){
    $('.fullscreen .fixed-toolbar').css('visibility', 'visible');
    $(".fullscreen .fixed-submit").css('visibility', 'visible');
    $(".fullscreen .fixed-toggle .exit-fullscreen").css('visibility', 'visible');
    setTimeout(function(){ 
      $(".fullscreen .fixed-toolbar").css('visibility', 'hidden');
      $(".fullscreen .fixed-submit").css('visibility', 'hidden');
      $(".fullscreen .fixed-toggle .exit-fullscreen").css('visibility', 'hidden');
    }, 3000 ); 
  });

即使用户将鼠标保持在.fixed-toolbar. 只要用户打开鼠标，我想防止 div 消失.fixed-toolbar（并且仅在光标离开后 3 秒使其消失.fixed-toolbar）。

如何做到这一点？

Answer 1

尝试

$(document).on("mouseover", ".fixed-container", function(){
    $('.fullscreen .fixed-toolbar, .fullscreen .fixed-submit, .fullscreen .fixed-toggle .exit-fullscreen').fadeIn();
}).on('mouseleave', '.fixed-container', function(){
    setTimeout(function(){
        $('.fullscreen .fixed-toolbar, .fullscreen .fixed-submit, .fullscreen .fixed-toggle .exit-fullscreen').fadeOut();
    }, 3000);
});

Answer 2

$(document).on("mouseover", ".fixed-container", function(){
    $('.fullscreen .fixed-toolbar, .fullscreen .fixed-submit, .fullscreen .fixed-toggle .exit-fullscreen').css('visibility', 'visible');
});
$(document).on("mouseout",".fixed-container",function(){
    setTimeout(function(){
    $(".fullscreen .fixed-toolbar, .fullscreen .fixed-submit, .fullscreen .fixed-toggle .exit-fullscreen").css('visibility', 'hidden');
    },3000);
});

或者，如果您在 CSS 中使用display:none;而不是：visibility:hidden;

$(document).on("mouseover", ".fixed-container", function(){
    $(".fixed-toolbar, .fixed-submit, .exit-fullscreen").show();
});
$(document).on("mouseout",".fixed-container",function(){
    setTimeout(function(){
        $(".fixed-toolbar, .fixed-submit, .exit-fullscreen").hide();
    },1000);
});

或者使用一些内置的 jQuery 效果：

$(document).on("mouseover", ".fixed-container", function(){
    $(".fixed-toolbar, .fixed-submit, .exit-fullscreen").slideDown();
});
$(document).on("mouseout",".fixed-container",function(){
    setTimeout(function(){
        $(".fixed-toolbar, .fixed-submit, .exit-fullscreen").slideUp();
    },1000);
});