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

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 了解我认为您想要的示例。