引導嘰嘰喳喳像後續按鈕

Question

我需要一個一個如下圖所示按鈕像this example

我本來應該在Java腳本寫？

$('.following').hover(function(){ 
     $(this).text("Unfollow"); 
    },function(){ 
     $(this).text("Following"); 
    }); 
    //for toggle the class following/follow When click 
    $('.following').click(function(){ 
    $(this).toggleClass('following follow').unbind("hover"); 
    if($(this).is('.follow')){ 
     $(this).text("Follow"); 
    } 
    else{ 
    //binding mouse hover functionality 
     $(this).bind({ 
      mouseleave:function(){$(this).text("Following");}, 
      mouseenter:function(){$(this).text("Unfollow");}  
     }); 
    } 
    }); 

什麼樣的變化需要引導按鈕？

Answer 1

您可以在CSS中做到這一點，像這樣：http://jsfiddle.net/Th4th/

.follow { 
    width: 100px; 
    height: 40px; 
    background-color: gray; 
} 
.follow:hover span {display:none;} 

.follow:hover:before { 
    content: "Unfollow" 
} 

我不認爲你需要的Java腳本的按鈕變化，只有採取點擊的動作。