jquery - 类似 Twitter 的关注按钮，悬停操作

Question

这个问题已经有答案了:

已关闭 11 年前。

Possible Duplicate:
How could someone replicate the Follow/Unfollow hover action on Twitter's website using Twitter Bootstrap?

我正在创建一个类似 Twitter 的关注按钮。代码位于http://jsfiddle.net/RQSsz/9/ .

<button type="submit" value="" class="btn follow following " title="In bookmarks">
    <i class="bookmarked"></i><span>In bookmarks</span>
</button>
<button type="submit" value="" class="btn follow unfollow displaynone" title="From bookmarks">
    <i class="unfollow"></i><span>From bookmarks</span>
</button>

$('.btn.follow.following').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        $(".btn.follow.following").toggleClass("displaynone");
        $(".btn.follow.unfollow").toggleClass("displaynone");
    } else {
        $(".btn.follow.following").toggleClass("displaynone");
        $(".btn.follow.unfollow").toggleClass("displaynone");
    }
});

我遇到了按钮闪烁的问题。做错了什么？

Answer 1

按钮的隐藏触发hover事件，导致按钮隐藏，进而触发hover事件等等，等等

首先，你的选择器是胡说八道。您想要选择两个按钮:

$('.follow, unfollow')

其次，为什么要费心切换类呢？这意味着您依赖于初始状态。只需使用 show()/hide() 方法即可:

$(".btn.follow.following").hide();
$(".btn.follow.unfollow").show();

和

$(".btn.follow.following").show();
$(".btn.follow.unfollow").hide();

我已经修改了您的演示，现在它应该可以工作了。

http://jsfiddle.net/mGGae/1/