有人如何使用 Twitter Bootstrap 在 Twitter 网站上复制关注/取消关注悬停操作？答案

【问题标题】：How could someone replicate the Follow/Unfollow hover action on Twitter's website using Twitter Bootstrap?有人如何使用 Twitter Bootstrap 在 Twitter 网站上复制关注/取消关注悬停操作？
【发布时间】：2012-01-17 07:43:33
【问题描述】：

当您查看您在 Twitter 上关注的人时，按钮会从关注变为取消关注（从绿色切换到红色并且从复选标记变为 x 标记）。

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

【问题讨论】：

据我所知，Twitter 实际上并没有为 twitter.com 使用 Bootstrap；我认为他们只将它用于小型、主要是内部项目。

标签： javascript button twitter-bootstrap stylesheet

【解决方案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("&cross; UnFollow");

}

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

【讨论】：

【解决方案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 */
  }
}

【讨论】：