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

Question

如何防止 div 在鼠标悬停后停留？例如，我将鼠标悬停在一个 div 上，然后出现另一个 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举个我认为你想要的例子。