现在我有了一个按钮，我可以用它来关注或取消关注。
现在当目标用户已经被关注时。它就是这样显示的。
那么目标用户没有被关注，就是这样显示的。
我希望在目标用户已被关注时显示“已关注”。
然后，当我将鼠标光标移到按钮上时，显示应更改为“取消关注”。
我如何使用 bootstrap 做到这一点？
查看
<% 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>
更新:
<a href="/user/1/unfollow" class="btn" data-remote="true" onhover="someFunction()">
<i id="Following" class="icon-remove"></i>
Following
</a>
最佳答案
使用 onHover 事件您也可以使用 jQuery 更改您想要更改文本的按钮的“类”属性。
即
<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>
关于css - 如何使用 Bootstrap 制作类似 twitter 的悬停 'Follow' 按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14381500/