How Could Someone Replicate The Follow/Unfollow Hover Action On Twitter's Website Using Twitter Bootstrap?

When you look at who you're following on Twitter, the buttons change from Follow to Unfollow (switch from green to red AND change from check-mark to x-mark). How would I replicate

Solution 1:

bootstrap-buttons.js is a new feature in Twitter Bootstrap. But you can also do it manually using jQuery.

Here's a button (green)

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

now, you need to change the class and content of the button on hover,:

// Javascript File
function change_btn(){

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

}

This script will remove and add classes to change the background of the button and also changes the content in it.

Solution 2:

I had the same question but I think I figured it out a little bit by checking the element of the following button on Twitter.com. it can be done in pure CSS, for example:

<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>

the button will contain 3 different action texts at the same time. and we can use CSS to hide 2 of them, according to the condition:

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