How could someone replicate the Follow/Unfollow hover action on Twitter's website using Twitter Bootstrap?

Question

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 wo

Answer 1

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:

  
    
Following
    
Follow
    
Unfollow
  

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