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

Question

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

（有点像 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");
    });
});

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

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

有什么想法吗？

Answer 1

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

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

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

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

Answer 2

我只会使用一个元素：

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

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

});

Answer 3

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