Question

如何在鼠标悬停后保留div？例如，我将鼠标悬停在一个div上，然后另一个显示。当我试图将鼠标悬停在刚被揭开的那个上面时，它会消失，因为我不是“.mouseenter-ing”，原来的div。

这是我的代码：

    $(document).ready(function() {
        $(".panel").hide();
        $("body").fadeIn(1800);
        $(".starter").mouseover(function() {
            $(".panel").slideDown(600);
        });
        $(".starter").mouseleave(function() {
         $(".panel").slideUp(600);
            $(".panel").mouseenter(function() { 
                $(".panel").show();
      });
     });
    });

Answer 1

假设您需要以下内容：

将鼠标悬停在.starter
slideDown .panel
仅当您将鼠标移出.panel时，请滑动.panel

当你鼠标离开.starter时，你正在隐藏.panel，尝试这样的事情而不是从第7行开始：

$(".panel").mouseleave(function() {
  $(".panel").slideUp(600);

如果你想确保.panel在关闭.starter后关闭，你可以使用一个计时器，以确保它们在指定的时间内没有鼠标悬停在.panel上时最终关闭。在这种情况下，1秒：

$(".starter").mouseleave(function() {
  $(".panel").data('mouseLeaveTimeout', setTimeout(function() {
    $(".panel").slideUp(600);
  },1000));
});

$(".panel").mouseover(function() {
  clearTimeout($(this).data("mouseLeaveTimeout"));
});

查看this codepen以获取我认为您想要的示例。

jQuery - 在mouseenter之后保持打开另一个元素

这是我的代码：

1 个答案: