当我快速鼠标时，jQuery悬停卡住了

Posted 2023-05-08

【中文标题】当我快速鼠标时，jQuery悬停卡住了

【英文标题】：jQuery hover gets stuck when I mouse quickly

【发布时间】：2012-04-18 13:09:05

【问题描述】：

我有一个显示“订阅”的按钮，当用户将鼠标悬停在它上面时，我想用另一个显示“取消订阅”的按钮替换它。

（有点像 Twitter 的关注按钮，如果你悬停，它会变成取消关注。）

这是我到目前为止所得到的。

$(document).ready(function()
    $('#subscribed_button').hover(function()
        $('#subscribed_button').css("display","none");
        $('#unsubscribe_button').css("display","inline");
    ,function()
    );
    $('#unsubscribe_button').hover(function()
    ,function()
        $('#unsubscribe_button').css("display","none");
        $('#subscribed_button').css("display","inline");
    );
);

一切都很好，除了当我快速鼠标时，在这种情况下似乎检测到“悬停”，但没有检测到“悬停”。所以我的按钮偶尔会卡在“取消订阅”中……这很奇怪，而且在视觉上会分散注意力。

我在 *** 上看到的大多数解决方案都与停止动画有关，但在这种情况下，我没有制作任何动画；这是一个简单的显示开/关。

有什么想法吗？

【问题讨论】：

你能提交一个活生生的例子吗？

在 CSS 中实际上有一个叫做 :hover 的东西，代码中有很多函数吗？

@Jorge，当代码不起作用时，我很犹豫是否将代码推送到 WWW。

@adeneo 我通常会使用 :hover 进行样式设置，但在这种情况下，我实际上是在更改按钮的文本，而且我想不出在没有纯 CSS 的情况下做到这一点的方法在某处涉及 javascript。

【参考方案1】：

没有看到它的实际效果，我假设这是因为您显示/隐藏了 2 个不同的 html 元素。当您快速将鼠标悬停时，可能是非活动元素尚未激活，等等等等，从而导致问题。

为了获得更好的稳定性和性能，我建议如下：

您的订阅/取消订阅仅使用一个 html 元素，而不是显示/隐藏 2 个元素，只需更改按钮的文本和/或通过更改 css 类等替换背景图像。甚至更好如果使用图像背景将使用包含两种状态的单个背景图像，并根据当前状态更新背景位置。

以上只是一个概念，因为您尚未发布整个代码，因此无法针对上述进行修改。

【讨论】：

谢谢，成功了！ @binarious 给了我一个很好的 sn-p。谢谢你们。

【参考方案2】：

我只会使用一个元素：

$(function() 
    var $sub = $('#subscribe_button');

    $sub.hover(function() 
        $sub.text('Unsubscribe');
    , function() 
        $sub.text('Subscribe');
    );

);

【讨论】：

谢谢！ @KP。给了我理论，你给了我实践。效果很好。

【参考方案3】：

在 jQuery 中有称为 mouseenter 和 mouseleave 的方法。 http://api.jquery.com/mouseenter/ 如果您使用它们，它将有助于正确冒泡并解决您的问题。

【讨论】：

以为可以做到，但遗憾的是没有骰子。

你能发一个mouseenter and leave in use的例子吗？