使用jQuery动画远离光标时，停止“：悬停”元素保持其状态？

Posted 2023-05-08

【中文标题】使用jQuery动画远离光标时，停止“：悬停”元素保持其状态？

【英文标题】：Stop ":hover" elements from holding their state when animated away from cursor with jQuery?

【发布时间】：2014-01-29 18:47:44

【问题描述】：

我遇到了一个问题，即当元素通过 jQuery animate() 动画远离鼠标时，元素不会丢失它们的 :hover。

:hover 一直有效，直到鼠标移动为止。有没有办法阻止这种行为？ 它似乎发生在 IE、Chrome 和 Firefox 中。

【问题讨论】：

你能给我们一些代码吗？

“有什么方法可以阻止这种行为吗？” 不是我能想到的，我不认为你可以用 javascript 做任何事情来强制浏览器重新评估鼠标是否在元素上。您可以删除 :hover 并将其替换为悬停类，然后使用 javascript 添加/删除该类，这样您可以在动画时删除该类以模拟鼠标离开它（但是，将触发离开事件，这样可能也不需要）

您能告诉我们您的尝试吗？也许准备一把小提琴？

@SAFEERN jsfiddle.net/2wYxW

其实我的建议也行不通，因为mouseleave事件也不会被触发，除非你移动鼠标。

【参考方案1】：

有一种方法可以移除悬停状态，但它可能不适用于所有浏览器并且有其缺点。

秘密武器是 CSS 属性pointer-events。如果将其值设置为none，则该元素不再接收鼠标事件。如果它处于悬停状态，它将失去该状态（在 Chrome 和 Safari 中测试）。

仅当鼠标指针仍在元素上方时，才能移除悬停状态。因此，如果您在动画开始之前这样做，您将看到根本没有悬停状态或短暂闪烁，具体取决于浏览器。

如果这对您来说是个问题，您需要计算超时或使用progress 处理程序来处理.animate() 以获得正确的时机。

【讨论】：

虽然这不适用于我的应用程序，需要 IE 支持，但我觉得这是对所提出问题的最准确答案。我最终通过 Javascript 添加了一个类。

大家好，我已经成功地克服了使用 animate.css 和使用指针事件的引导下拉菜单的问题：无；诡计感谢一百万。但是，这不适用于 subMenu.addClass('animated fadeInLeft'); setTimeout(function() subMenu.removeClass('animated fadeInLeft'); ,500);

【参考方案2】：

您可以使用超时功能提供另一个功能或事件。

$("#box").one("mouseenter",function()
    var $this = $(this);
    $(this).css('color','green');
    window.setTimeout(function()
        $this.css('color','red');
    ,300);
)

这种类型的方法可以在不离开悬停状态的情况下工作。我不知道这种方法对你有用..

【参考方案3】：

我遇到了同样的问题。 jquery animate 函数将元素从鼠标光标下移出，因此不会收到将:hover 状态重置为关闭的 mousemove 或 mouseleave 事件。

我发现我无法使用 CSS 伪类选择器，而不得不依靠 jquery hover() api 方法手动添加/删除单独的 CSS 类。

$('li.hoverable').hover(
    function ()  $(this).addClass('hovering'); ,
    function ()  $(this).removeClass('hovering'); );

后来

// animate back to the final position
elem.animate( top: 0, left: 0 , 400, "easeInOutCubic",
    function ()  elem.removeClass('hovering'); );