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

Question

我正在尝试设置我的 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;}

是否也可以更改图标的颜色？

Answer 1

您只需将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
  }