如何使用引导程序制作类似推特的悬停“关注”按钮？答案

【问题标题】：How can I make the twitter-like hover 'Follow' button with bootstrap?如何使用引导程序制作类似推特的悬停“关注”按钮？
【发布时间】：2013-01-17 14:41:02
【问题描述】：

现在我有了一个按钮，我可以用它来关注用户或取消关注。
现在当目标用户已经被关注时。它就像这样显示。

那么目标用户没有被关注，就这样显示。

我希望它在目标用户已被关注时显示为“关注”。
然后，当我将鼠标光标移到按钮上时，显示应更改为“取消关注”。

如何使用引导程序做到这一点？

查看

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

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

使用 onHover 事件你可以使用 jQuery 来改变你想要改变文本的按钮的“class”属性。

即

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

【讨论】：

您的 Javascript 中有多余的/缺少的引号
这不是完全适合生产的代码。 OP 必须编写 100% 的仪式代码，但工作已经完成了 90%。
嗯，我试过了，但它对我的不起作用:( "someFunction()", :remote => true, : class=> 'btn') 做 %>
从中生成的 HTML 是什么？
@user373466 我更新了我的问题。请检查底部。