Question

当鼠标在#panel和#flip之间移动/悬停时，如何保持#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

如果您在#container和#flip周围添加#panel 您可以向其中添加一个.mouseleave()事件，因此，当您单击#flip时，面板会向下滑动（并展开容器），只要将鼠标停留在该容器中，面板就会保持打开状态（您可以可以悬停在翻盖或面板上）。当鼠标离开容器时，面板将向后滑动。

（我将翻转时的事件更改为click事件，并且显示为“ click to slide”）

作为一个提示，您可能希望重新编写代码以使用CSS类而不是id，这将使您的代码可重用（您可以在同一页面中使用多个滑动面板）

$(document).ready(function() {

  $("#flip").click(function() {
    $("#panel").slideDown("slow");
  });
  $("#container").mouseleave(function() {
    $("#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="container">
  <div id="flip">Click to slide the panel down or up</div>
  <div id="panel">Hello world!</div>
</div>

Answer 2

只有当鼠标从这两个中移出时，才如何向上滑动？

要获得此结果，您需要：

在鼠标进入面板或键盘盖并且隐藏面板时显示面板（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>

关于鼠标悬停在两个元素之间的问题

2 个答案: