font-awesome icon - onmouseover 事件改变颜色答案

【问题标题】：font-awesome icon - onmouseover event change colorfont-awesome icon - onmouseover 事件改变颜色
【发布时间】：2018-05-21 11:34:00
【问题描述】：

我有一个 ASP.NET gridview 控件，在最后一列中有一个字体很棒的垃圾桶图标。

在 mouseover 上我希望颜色变为红色，然后再回到默认值onmouseout。

这是 asp.net 网格视图中的template field：

<asp:TemplateField HeaderText="Delete?" ItemStyle-HorizontalAlign="Center">
    <ItemTemplate>
        <span ID="lnkDelete" style="border:none" onclick="return confirm('Are you sure you want to delete this Performance Review?')"
                    runat="server" ItemStyle-CssClass="fa fa-trash-0" 
                onmouseover="this.style='color:red;'"    
                CommandName="Delete">
                <i  class="fa fa-trash-o" onmouseover="script:this.style='color:red; font-size:24px'"  onmouseout="script:this.style='color:black; font-size:24px'"
                    style="font-size:24px;"></i> 
            </span>

    </ItemTemplate>
</asp:TemplateField>

在 IE 中呈现为

<span id="ctl00_m_g_10488b48_1486_45be_8a9c_efc307c0cb4b_ctl00_grdPR_ctl04_lnkDelete" style="border: currentColor;" 
onclick="return confirm('Are you sure you want to delete this Performance Review?')" CommandName="Delete" ItemStyle-CssClass="fa fa-trash-0">
<i class="fa fa-trash-o" style="font-size: 24px;" onmouseover="script:this.style='color:red; font-size:24px'"></i> 
                    </span>

但我显然弄错了，因为当我将鼠标悬停在垃圾桶图标上时没有任何变化。

我也尝试在我的页面中使用 css hover 样式，但同样没有任何反应：

<style>
.fa fa-trash-o{
  color: black
}
.fa fa-trash-o:hover{
  color:red;
}
</style>

那我哪里错了？

【问题讨论】：

更正选择器.fa.fa-trash-o

标签： css asp.net font-awesome onmouseover onmouseout

【解决方案1】：

您可以仅通过 CSS 实现此目的。问题是您在 css 中使用了错误的选择器。 fa 和 fa-trash-o 类在同一个元素中。所以你需要删除fa 和fa-trash-o 之间的空格并将. 放在它们之前，因为它们是类

.fa.fa-trash-o {
  color: black
}

.fa.fa-trash-o:hover {
  color: red;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<i class="fa fa-trash-o"></i>

【讨论】：

谢谢-快速跟进，如何确保鼠标图标是箭头而不是线？
试试cursor:default;

【解决方案2】：

请参阅下面的代码，您会在 fa-trash-o 类之前忘记 . ：
css 中的选择器：https://www.w3schools.com/cssref/css_selectors.asp

.fa-trash-o{
  color: black
}
.fa-trash-o:hover{
  color:red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span>
    <i class="fa fa-trash-o" style="font-size: 24px;"></i> 
</span>

【讨论】：