类似Twitter的按钮,悬停动作

Question

可能重复:
如何使用Twitter Bootstrap在Twitter的网站上复制Follow/Unfollow悬停操作？

我正在创建一个类似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

隐藏按钮会触发悬停事件,导致隐藏按钮,触发悬停事件等,等等.

首先,你的选择器是无稽之谈.您想要选择两个按钮:

$('.follow, unfollow')

其次,为什么要打扰一个班级呢？这意味着你依赖于初始状态.只需使用show()/ hide()方法:

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

和

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

我已经修改了你的demo,它现在应该可以工作了.

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