问Jquery悬停触发“鼠标离开”而不离开光标
EN

Stack Overflow用户

提问于 2019-08-16 17:55:31

回答 1查看 28关注 0票数 1

我有一个嵌套了input的按钮li。我在li元素中添加了带有jQuery的悬停功能。它工作得很好，除了当我非常快地在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);
  });
});

jquery

hover

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-16 17:57:20

您需要将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好得多。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57522568

复制

相似问题

问Jquery悬停触发“鼠标离开”而不离开光标
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery悬停触发“鼠标离开”而不离开光标EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery悬停触发“鼠标离开”而不离开光标
EN