2

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

（有点像 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 上看到的大多数解决方案都与停止动画有关，但在这种情况下，我没有制作任何动画；这是一个简单的显示开/关。

有任何想法吗？

4

3 回答 3

3

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

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

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

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

于 2012-04-04T19:19:25.793 回答
2

我只会使用一个元素：

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

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

});
于 2012-04-04T19:21:22.510 回答
1

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

于 2012-04-04T19:20:58.863 回答