悬停在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');
  }
});

看看这个工作小提琴

Answer 2

我在Kld脚本中又添加了几行

    $(function() {
  $("#startMenu").hide();
  var timeoutId;
  $("#menuDesktop").hover(function() {
     $("#menuDesktop").css("background", "red");
      if (!timeoutId) {
        timeoutId = window.setTimeout(function() {
          timeoutId = null;
          $("#topBarDesktop").stop(true, true).slideUp('400');
          $("#startMenu").stop(true, true).slideDown('1000');
        }, 400);
      }
    },
    function() {
      if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;
      } else {
        $("#startMenu").stop(true, true).slideUp('slow');
        $("#topBarDesktop").slideDown('400');
         $("#menuDesktop").css("background", "gold");
      }
    });
  $("#startMenu").hover(function(){
    $( this).stop();
       $("#topBarDesktop").stop(true, true);
       $("#menuDesktop").css("background", "red");
  }, function(){
     $("#startMenu").stop(true, true).slideUp('slow');
     $("#topBarDesktop").slideDown('400');
     $("#menuDesktop").css("background", "gold");
  })       
});