鼠标快速移动时出现jQuery悬停问题

iyfjxgzm 于 2022-12-12 发布在 jQuery

关注(0)|答案(2)|浏览(142)

我有div，类为.catalog-btn。它有兄弟.catalog-mnu（下拉菜单）和display: none
当I hover对.catalog-btn时，slideDown()被触发为.catalog-mnu。
.catalog-mnu出现在.catalog-btn下。它有:before伪类，该伪类创建了div，其宽度和高度等于.catalog-btn的大小。那么会发生什么：用户将鼠标悬停在按钮上，下拉菜单出现，此菜单具有覆盖悬停按钮的before元素。因此，现在按钮被下拉菜单.catalog-mnu覆盖。如果下拉菜单触发mouseleave，则slideUp()将隐藏它。以下是HTML：

<div class="catalog-btn">
    <div class="catalog-btn__text">Каталог оборудования</div>
</div>
<div class="catalog-mnu">
    <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
    </ul>
</div>

下面是jQuery代码：

$(document).on('mouseenter', '.catalog-btn', function() {
    $(".catalog-mnu.catalog-mnu-desktop").stop().slideDown(250);
  });

  $(document).on('mouseleave', '.catalog-mnu.catalog-mnu-desktop', function() {
    $(".catalog-mnu.catalog-mnu-desktop").stop().slideUp(250);
  });

这个问题是：如果你将鼠标悬停在按钮上，但很快将鼠标移出，在slideDown()动画完成之前，下拉菜单会出现，但下拉菜单上不会有"mouseenter"。所以光标不在下拉菜单上，但菜单是可见的（而它应该只在悬停时可见）。菜单不会隐藏，直到你实际悬停它，然后将鼠标移出。
我该如何修改jQuery代码来解决这个问题呢？我猜问题出在动画上。当你把鼠标悬停在按钮上时-slideDown()启动。但是如果mouseleave在动画完成之前发生-'mouseenter'事件不会被触发。如果不快速移动光标-一切都按预期工作。

jquery

来源：https://stackoverflow.com/questions/53228104/jquery-hover-issue-if-mouse-moves-fast

2条答案

按热度按时间

lymgl2op1#

JS在鼠标快速移动的情况下往往会遇到类似这样的问题。另一种方法是使用CSS通过:hover伪选择器和transition属性来动态显示菜单状态，在您的情况下可以这样做：
第一个

赞(0）回复(0）举报 2022-12-12

5f0d552i2#

您应该将catalog-mnu移动到您的悬停中。
我建议您在这种情况下不要使用slideDown/SlideUp，而是实现您自己的动画...类似于以下内容：

.menu-outer {
  height: 0;
  overflow: hidden;
}

<div class="catalog-btn">
  <div>BUTTON</div>
  <div class="menu-outer"><div class="menu-inner">MENUITEM<br/>MENUITEM<br/>MENUITEM</div></div>
</div>

$(document).on('mouseenter', '.catalog-btn', function() {
  var $this = $(this);
  $this.find('.menu-outer').stop(true, false).animate({'height': $this.find('.menu-inner').outerHeight()}, 250, 'swing', function() {
    $this.find('.menu-outer').css({'height': 'auto'});
  });
});

$(document).on('mouseleave', '.catalog-btn', function() {
  var $this = $(this);
  $this.find('.menu-outer').stop(true, false).animate({'height': 0}, 250, 'swing', function() {
    $this.find('.menu-outer').css({'height': ''});
  });
});

赞(0）回复(0）举报 2022-12-12

我来回答

鼠标快速移动时出现jQuery悬停问题

2条答案

相关问题

热门标签

最新问答