javascript - 将鼠标悬停在 div 上会触发 div，如果悬停在该 div 上，该 div 将保留

Question

我有一个 div，当它悬停在上面时，它会激活另一个 div。当用户将鼠标移动到激活的 div 上时，我希望该 div 保留下来。这是一个片段。

当您将鼠标悬停在金色框上时，紫色框会隐藏并显示灰色框。当鼠标悬停在灰色框上时，我希望灰色框保留下来，而不是消失。然后，当鼠标第二次悬停在金色框上时，灰色框将隐藏起来，紫色框将返回。如何在 Jquery 中使用流畅的动画来做到这一点？

$(function() {
  $("#startMenu").hide();
  var timeoutId;
  $("#menuDesktop").hover(function() {
      if (!timeoutId) {
        timeoutId = window.setTimeout(function() {
          timeoutId = null;
          $("#topBarDesktop").slideUp('400');
          $("#startMenu").slideDown('1000');
        }, 400);
      }
    },
    function() {
      if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;

      } else {
        $("#startMenu").slideUp('slow');
        $("#topBarDesktop").slideDown('400');
      }
    });
});

#topBarDesktop {
  position: fixed;
  top: -.1em;
  right: -1em;
  padding: 20px 100%;
  background: purple;
}
#menuDesktop {
  width: 50px;
  position: absolute;
  height: 50px;
  background: gold;
  display: inline-block;
  vertical-align: top;
  float: left;
  left: -15px;
  top: -15px;
}
#menuDesktop:hover {
  background: red;
}
#startMenu {
  background: grey;
  padding: 100% 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topBarDesktop">

</div>
<div id="menuDesktop">

</div>
<div id="startMenu">

</div>

Answer 1

您可以将 else 更改为 else if 以检查 #startMenu 是否悬停。然后，您还需要确保在 #menuDesktop 和 #startMenu 上调用 .hover()，这样事情就会滑回来当您将鼠标悬停在 #startMenu 上时也会到位。

$("#menuDesktop, #startMenu").hover(function() { //Added #startMenu to selector
  if (!timeoutId) {
    timeoutId = window.setTimeout(function() {
      timeoutId = null;
      $("#topBarDesktop").slideUp('400');
      $("#startMenu").slideDown('1000');
    }, 400);
  }
}, function() {
  if (timeoutId) {
    window.clearTimeout(timeoutId);
    timeoutId = null;
  } else if ($("#startMenu:not(:hover)").length && $("#menuDesktop:not(:hover)").length) { //Checks that neither #startMenu or #menuDesktop is hovered on.
    $("#startMenu").slideUp('slow');
    $("#topBarDesktop").slideDown('400');
  }
});

看看这个工作 fiddle