时间戳

首页 > 解决方案 > jQuery悬停触发“鼠标离开”而不离开光标

jquery - jQuery悬停触发“鼠标离开”而不离开光标

问题描述

我有一个li带有嵌套的按钮input。li我在元素中添加了带有 jQ​​uery 的悬停功能。它工作正常，除非当我li非常快速地将鼠标悬停进出按钮时，mouseenter不会触发而是只会mouseleave触发，即使仍然悬停在元素上也是如此。

我知道问题是由计时器引起的，但我不知道如何设置它以按预期工作。

$(document).ready(function() {    
  $('.topMenu__item--button').hover(function () {
    var hoverTimeout;
    clearTimeout(hoverTimeout);
    $(this).addClass('topMenu__item--button--hover');
  }, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
      $self.removeClass('topMenu__item--button--hover');
    }, 500);
  });
});

标签： jqueryhover

解决方案

您需要将hoverTimeout声明移动到两个函数的范围内：

$(document).ready(function() {
  var hoverTimeout;

  $('.topMenu__item--button').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('topMenu__item--button--hover');
  }, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
      $self.removeClass('topMenu__item--button--hover');
    }, 500);
  });
});

您还应该注意，最好将此悬停行为放入 CSS 中，因为它的性能比 JS 好得多。

推荐阅读