Question

可能重复：
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

隐藏按钮会触发悬停事件，导致隐藏按钮，触发悬停事件等，等等。

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

$('.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/

Answer 2

这样的事情：


$('.btn.follow.following').live({
    mouseover : function(event) {
        $(this).hide();
        $(".btn.follow.unfollow").show();
    }
    mouseout: function(event) {
        $(".btn.follow.unfollow").hide();
        $(this).show();        
    }
});

Answer 3

$("button.follow").hover(
 function () {
  $(this).html($("<i class='bookmarked'></i><span>From bookmarks</span>"));
 }, 
 function () {
  $(this).html("<i class='bookmarked'></i><span>IN boomarks</span>");
 }
);

Answer 4

我有同样的问题，但我想通过检查Twitter.com上以下按钮的元素我想出了一点。它可以在纯CSS中完成，例如：

<div class="follow-button-combo is-following">
  <a href="xxxx" class="btn">
    <div class="is-following">Following</div>
    <div class="to-follow">Follow</div>
    <div class="to-unfollow">Unfollow</div>
  </a>
</div>

该按钮将同时包含3个不同的动作文本。我们可以根据条件使用CSS来隐藏其中的两个：

SCSS中的

：

/* in SCSS file */
.follow-button-combo {
  /* Following, make the combo's class = "is-following"
     so only the "Following" text is shown */
  &.is-following {
    .btn {@extend .btn-success;}
    .is-following {display:block;}
    .to-follow {display:none;}
    .to-unfollow {display:none;}
    /* when hover, only the "Unfollow" text is shown */
    &:hover {
      .btn{@extend .btn-danger;} /* the button color changes to red */
      .is-following {display:none;}
      .to-follow {display:none;}
      .to-unfollow {display:block;} } 
  }

  /* Not following, make the combo's class = "not-following"
     so only the "Follow" text is shown */
  &.not-following {     
    .is-following {display:none;}
    .to-follow {display:block;}
    .to-unfollow {display:none;}    
    /* when hover, nothing changes */
  }
}

类似Twitter的按钮，悬停动作

4 个答案: