【Rails】Font awesomeアイコンがマウスオーバーで背景が黒くなってしまう場合の対処法

2021.12.042021.08.26

現象

ゴミ箱をマウスオーバーすると、背景が黒くなってしまう。

黒くなるときのコードがこちら

<%= link_to customer_customer_contact_path(customer_contact.customer_id, customer_contact.id), method: :delete, remote: true, data: { confirm: "本当に削除しますか?"} do %>
  <i class="far fa-trash-alt"></i>
<% end %>

解決策

アイコン自体を囲ったclassに、hover時のcssを適用する。

完成イメージ

<%= link_to product_product_contact_path(product_contact.product_id, product_contact.id), method: :delete, remote: true, data: { confirm: "本当に削除しますか?"} do %>
<span class="delete_icon">
	<i class="far fa-trash-alt"></i>
</span>
<% end %>

.delete_icon:hover {
  color: green;
  background-color: white;
}