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也会在3秒后消失。我希望防止div消失，只要用户将鼠标放在.fixed-toolbar上（并且只在光标离开.fixed-toolbar后3秒后消失）。

如何做到这一点？

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);
});

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

2 个答案: