jquery - 如何在 CSS 中管理#homeSub 的尺寸，以便当我将鼠标从 homeBox 移动到 home Sub 时它不会消失？

Question

当我将鼠标悬停在 #homeBox 上时，会出现 #homeSub。但是当我想移动鼠标点击 #homeSub 它消失了。我知道它应该作为切换效果自然出现和消失，但我需要固定位置，以便 #homeSub 只有在我将鼠标移出 #homeBox 时才会消失和 #homeSub。

$(function() {
  $("#homeBox").hover(function() {
    $("#homeSub").toggle("slow");
  });
});

#homeSub {
  background-color: yellow;
  display: none;
  position: relative;
  float: left;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a id="homeBox" href="#">Home</a>
  </li>
  <li><a id="homeSub" href="#">you</a>
  </li>
</ul>

Answer 1

将悬停事件附加到 ul:

HTML:

<ul id="list">
  <li><a id="homeBox" href="#">Home</a>
  </li>
  <li><a id="homeSub" href="#">you</a>
  </li>
</ul>

JS:

$(function() {
  $("ul#list").hover(function() {
    $("#homeSub").toggle("slow");
  });
});