如果鼠标在元素上和离开元素时快速移动，则防止 .hover 事件被发送垃圾邮件

Question

我已经实现了一个简单的弹出窗口，如果鼠标移到某个元素上就会出现，但是，我可以通过运行我的鼠标移动和关闭来引发一系列 .hover 事件元素迅速。我的意思是，即使我不再移动鼠标，弹出窗口也会多次出现和消失。这与 CSS :hover 规范形成对比，后者无论鼠标在元素上移动多少次都只触发一次。

如何复制此功能？我在下面包含了我的意思的示例，请尝试将鼠标快速移入和移出框以查看效果。

jQuery(document).ready( function($) {
  $('#hover').hover( function(event) {
    $('.popup').fadeIn( 200 );
  }, function(event) {
    $('.popup').fadeOut( 200, function() {
      $(this).hide();
    });
  });
});

.popup {
  width: 200px;
  height: 75px;
  color: white;
  background-color: black;
  display: none;
}

.hover-box {
  margin-top: 100px;
  width: 200px;
  height: 100px;
  background-color: green;
}

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

<div class="popup">
  Hello, I am a popup!  
</div>

<div id="hover" class="hover-box">
  Hover over me!
</div>

Answer 1

您可以使用 setTimeout 函数稍微延迟显示效果，并在 mouseout 事件上清除超时。像这样：

jQuery(document).ready( function($) {
  $('#hover').hover( function(event) {
    clearTimeout($(this).data('timeout'));
    $(this).data('timeout', setTimeout(function() {
      $('.popup').fadeIn( 200 );
    }, 300));
  }, function(event) {
    clearTimeout($(this).data('timeout'));
    $('.popup').fadeOut( 200, function() {
      $(this).hide();
    });
  });
});

.popup {
  width: 200px;
  height: 75px;
  color: white;
  background-color: black;
  display: none;
}

.hover-box {
  margin-top: 100px;
  width: 200px;
  height: 100px;
  background-color: green;
}

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

<div class="popup">
  Hello, I am a popup!  
</div>

<div id="hover" class="hover-box">
  Hover over me!
</div>

如果鼠标在元素上和离开元素时快速移动，则防止 .hover 事件被发送垃圾邮件

Preventing .hover event from being spammed if the mouse is quickly moved on and off the element

html

javascript

css

jquery

hover