鼠标退出将关闭触发器，而不是目标

mouseout closes the trigger and not the target

本文关键字：目标 触发器 退出 鼠标      更新时间：2023-09-26

我设置了一个弹出窗口，以便在将鼠标悬停在元素上时打开。当光标离开弹出窗口时，弹出窗口应关闭。由于某种原因，当光标直接离开其打开器按钮时，弹出窗口将关闭。您可以在此处查看示例：http://www.friends.wwz.co.il/Lab/Gefen/Generali/es/popup.html

请尝试将鼠标悬停在"lee mas"按钮上。将打开一个弹出窗口。它应该在悬停时关闭。但相反，它在悬停在 lee mas 按钮上时关闭，因此它会立即关闭。知道我哪里出错了吗？提前感谢您的建议

主要问题是您将悬停事件附加到按钮。将鼠标悬停在按钮元素之外后，它将触发 hoverOut 按钮。

因此，理想的行动方案可以是：

  • 将悬停事件绑定到按钮。
  • 悬停后，将动态添加弹出窗口。
  • 然后，悬停事件被绑定到弹出。
  • 并且溶解弹出窗口的代码附在悬停功能中。

这样，当光标实际悬停在弹出窗口之外时，它会溶解。

除此之外，看看这个小提琴。它有两个用于悬停的超链接。第一个是你面临的那个。第二个是您要找的那个。:D

代码：

$(document).ready(function() {
  $("#toggleSwitch_j").hover(
    function() {
      $("#theBox_3").slideDown(500);
    }, function() {
      $("#theBox_3").slideUp(500);
    });
  $("#StayOpen").hover(
    function() {
      $("#theBox_2").slideDown(500);
    }, function() {
      $("#theBox_2").slideUp(500);
    });
});
body {
  background-color: #eef;
}
#theBox_3,
#theBox_2 {
  display: none;
  border: 1px solid #000;
  width: 200px;
  height: 100px;
  background-color: #ddf;
}
#toggleSwitch_j,
#StayOpen {
  background-color: #cacaca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This layout will only keep the hidden div visible as long as you point to the link
<br>You'll never be able to reach anything inside the div
<br><a href="#" id="toggleSwitch_j">jQuery Hover</a>
<div id="theBox_3">Peek-a-boo!</div>
<hr>This layout puts the link and hidden div inside a wrapper - hovering anywhere inside the wrapper expands the hidden div, so you can reach content inside it. This would be handy if you need to put links or form elements inside the hidden div, instead of
just text to read.
<div id="StayOpen">
  <a href="#" id="toggleSwitch_2">jQuery Hover</a>
  <div id="theBox_2">Peek-a-boo!</div>
</div>

相关文章：