怎么可能有人使用Twitter Bootstrap在Twitter的网站上复制Follow / Unfollow悬停操作？

Question

当您在Twitter上查看您关注的对象时，按钮会从“关注”更改为“取消关注”（从绿色切换为红色并从复选标记更改为x标记）。

我如何在我的网站上复制这个？ 我意识到它可能是bootstrap-css和bootstrap-buttons.js的组合，但我无法弄明白......

Answer 1

bootstrap-buttons.js是Twitter Bootstrap中的一项新功能。 但您也可以使用jQuery手动完成。

这是一个按钮（绿色）

<a href="#" class="follow btn success" onmouseover="change_btn();">&check; Following</a>

现在，您需要在悬停时更改按钮的类和内容，：

// Javascript File
function change_btn(){

$('.follow').removeClass("success");
$('.follow').addClass("danger");
$('.follow').html("✗ UnFollow");

}

此脚本将删除并添加类以更改按钮的背景，并更改其中的内容。

Answer 2

我有同样的问题，但我想通过检查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来隐藏其中的2个：

在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 */
  }
}