将glyphicon添加到rails link_to helper并在悬停时禁用效果

时间:2016-03-02 02:46:18

标签: html css ruby-on-rails twitter-bootstrap

我试图设置我的link_to助手的样式。我想添加一个图标而不是链接并禁用所有效果。我遵循了这个方法Remove underline from link within hyperlinked div,但它对我不起作用,每当我将鼠标悬停在图标上时它就会消失,这不是我想要的。这是我到目前为止所拥有的。

<div id = "owner-icons">
<%= link_to  product, method: :delete, data: { confirm: 'Are you sure?' }  do %>    
<span class="glyphicon glyphicon-trash"></span> 
</div>
<% end %>

bootstrap.css

div.owner-icons a {text-decoration:none;}

是否可以更改图标的颜色?

1 个答案:

答案 0 :(得分:2)

您可以像这样简单地添加glyphicon链接:

查看(帮助我更改your_url

<div id="owner-icons">
  <%= link_to  '', your_url, method: :delete, data: { confirm: 'Are you sure?' }, class: 'glyphicon glyphicon-trash' %>
</div>

<强>风格

#owner-icons a {
  color: red; # your custom color
  text-decoration: none;
}

顺便说一句,在您当前的代码中存在一些问题:

  • owner-icons id而非class,因此您的css将无效
  • 我认为
  • </div>结束标记不在正确的位置

更新

将悬停样式添加到链接:

  • 如果您使用的是scss

    #owner-icons a {
      color: red; # your custom color
      text-decoration: none;
      &:hover {
        background: transparent; # Your custom background
      }
    }
    
  • 或普通的CSS

    #owner-icons a {
      color: red; # your custom color
      text-decoration: none;
    }
    #owner-icons a:hover {
      background: transparent; # Your custom background
    }