將glyphicon添加到rails link_to helper並在懸停時禁用效果

Question

我正在嘗試設置link_to助手的樣式。 我想添加一個圖標而不是一個鏈接並禁用所有效果。 我遵循了此方法， 從超鏈接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 }