Question

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

（有点像Twitter如果你将鼠标悬停在FOLLOWING按钮上变成UNFOLLOW。）

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

$(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/ 如果您使用它们将有助于正确的冒泡，并应解决您的问题。

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

3 个答案: