javascript - 鼠标悬停在两个元素之间的问题

Question

当鼠标在 #flip 和 #panel 之间移动/悬停时，如何保持 #panel 幻灯片向下/打开？如何只有当鼠标离开这两个时才向上滑动？

$(document).ready(function() {

  $("#flip").hover(function() {
    $("#panel").slideDown("slow");
  }, function() {});
  $("#panel").hover(function() {

  }, function() {
    $(this).slideUp("slow");
  });
});

body {
  padding-top: 20px;
}

#panel,
#flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel {
  padding: 50px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

Answer 1

And how slide up only when mouse is out of these two?

为了实现此结果，您需要:

• 鼠标进入面板或翻盖时显示面板(slideDown)，面板隐藏
• 当鼠标离开面板或翻盖且面板可见时隐藏面板(slideUp)。这里，选择器应该是:not(#flip, #panel)

$("#flip, #panel").on('mouseenter', function (e) {
  if ($("#panel").is(':hidden')) { // this test in order to reduce useless slideDown....
      $("#panel").slideDown("slow");
  }
});
$(":not(#flip, #panel)").on('mouseleave', function(e) {
  if ($("#panel").is(':visible')) { // this test in order to reduce useless slideUp....
      $("#panel").slideUp("slow");
  }
});

body {
    padding-top: 20px;
}

#panel,
#flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}

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

<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>