如何使用引導程序使Twitter類似懸停'按'按鈕？

現在我有了按鈕，我可以跟隨用戶，或不關注。
現在，當目標用戶已被遵循。它顯示就像這樣。如何使用引導程序使Twitter類似懸停'按'按鈕？

Un-Follow

然後將目標用戶沒有得到遵守，它顯示就是這樣的。

我想它顯示「以下」當目標用戶已遵循。
然後，當我將鼠標光標放在按鈕上時，顯示器應該改爲'Un-Follow'。

我怎麼能做到這一點與引導？

視圖

<% if user_signed_in? %> 
    <% unless user == current_user %> 
     <% if current_user.following?(user) %> 
     <%= link_to(unfollow_user_path(user), :remote => true, :class => 'btn') do %> 
     <i class="icon-remove"></i> 
     Un-Follow 
    <% end %> 
     <% else %> 
     <%= link_to(follow_user_path(user) ,:remote => true, :class => 'btn btn-primary') do %> 
     <i class="icon-ok icon-white"></i> 
     Follow 
     <%end%> 
     <% end %> 
    <% end %> 
<% else %> 
     <%= link_to(new_user_session_path , :class => 'btn btn-primary') do %> 
     <i class="icon-ok icon-white"></i> 
     Follow 
     <%end%> 
<% end %>

HTML

<a href="/user/1/follow" class="btn btn-primary" data-remote="true"> 
    <i class="icon-ok icon-white"></i> 
    Follow 
</a> 

<a href="/user/1/unfollow" class="btn btn-primary" data-remote="true"> 
    <i class="icon-remove icon-white"></i> 
    Un-Follow 
</a>

UPDATE：

<a href="/user/1/unfollow" class="btn" data-remote="true" onhover="someFunction()"> 
    <i id="Following" class="icon-remove"></i> 
    Following 
</a>

來源

2013-01-17 cat

使用onHover選項時，您可以使用jQuery來改變的「階級」屬性你想要ch的按鈕憤怒的文本也。

即

<a href="/user/1/follow" onHover="someFunction();" class="btn btn-primary" data-remote="true"> 
    <i id="Following" class="icon-ok icon-white"></i> 
    Following 
</a> 


someFunction() { 
    $('i#Following').attr("class", "icon-ok icon-white").innerText("Unfollow"); 
}

你得到的圖片有希望。

編輯：這是一個完整的代碼，應在火中的代碼someFunction鼠標。

<html> 

<head> 
<script type="text/javascript"> 

function someFunction() 
{ 
alert("Hello"); 
} 
</script> 
</head> 

<body> 
<a href="/user/1/unfollow" class="btn" data-remote="true" onmouseover="someFunction();return true;" > 
    <i id="Following" class="icon-remove"></i> 
    Following 
</a> 
</body> 

</html>

來源

2013-01-17 14:53:55

在您的Javascript中有額外/缺少引號 – MrYoshiji

這不完全是生產就緒代碼。 OP將不得不編寫100％禮儀代碼，但工作已經完成了90％。 –

嗯，我試過，但它不會在礦井:(工作<（％）=的link_to（unfollow_user_path（用戶），：onHover選項=> 「someFunction（）」，：遠程=>真，：類=> 'BTN'） do％> – cat

如何使用引導程序使Twitter類似懸停'按'按鈕？

回答

相關問題