将鼠标移到图标上时无法更改 Font Awesome 图标颜色

Question

我有以下 Font Awesome 图标：-

<a asp-action="Edit" asp-route-id="@item.Id"><i class="fas fa-marker fa-lg" ></i></a> |

默认情况下，将鼠标悬停在图标上时，图标颜色将为空白和蓝色。现在我想在悬停时将图标颜色更改为红色和蓝色，所以我添加以下内容：-

<a asp-action="Edit" asp-route-id="@item.Id"><i class="fas fa-marker fa-lg" style="color:#ff4c4c;"></i></a> |

但是我失去了悬停颜色，所以我添加了这个 css:-

.fa-marker:hover
{color:blue}

但没有任何效果。有什么建议可以更改图标的悬停颜色吗？

Answer 1

使用忽略所有其他样式的 !important，您的代码不起作用的原因是样式优先级，直接从 style="" 属性给出的所有样式具有更高的优先级

.fa-marker:hover {
  color: blue !important
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<a asp-action="Edit" asp-route-id="@item.Id"><i class="fas fa-marker fa-lg" style="color:#ff4c4c;"></i></a>

将鼠标移到图标上时无法更改 Font Awesome 图标颜色

Unable to change the Font Awesome icon color when moving the mouse over the icon

html

css

fonts

font-awesome