ASP.NET GridView中Font-Awesome图标鼠标悬停变色问题排查

嘿，我来帮你梳理下问题所在，主要是几个小细节写错了，导致hover效果没生效：

错误点分析 #

• 内联事件的script:前缀多余：你在onmouseover和onmouseout里写了script:this.style=...，这个前缀是完全不需要的，浏览器会把它当成无效代码，所以事件根本没触发。
• CSS选择器写法错误：.fa fa-trash-o这个选择器的意思是「查找class为fa-trash-o的子元素，它的父元素class是fa」，但你的<i>标签是同时拥有fa和fa-trash-o两个class，所以应该用复合类选择器，把两个class连在一起（中间无空格）：.fa.fa-trash-o。
• 冗余/错误的属性：你的<span>标签里写了ItemStyle-CssClass="fa fa-trash-0"，这个属性是GridView列（TemplateField）的属性，不是<span>的属性，而且fa-trash-0是拼写错误，应该是fa-trash-o，其实这个<span>的这个属性完全没必要，因为图标已经在<i>标签里了。

推荐解决方案：用CSS实现hover效果（更简洁易维护） #

这种方式不需要写内联事件，兼容性更好，代码更干净：

第一步：修正CSS代码 #

<style>
/* 默认样式 */
.fa.fa-trash-o {
    color: black;
    font-size: 24px;
}
/* hover时的样式 */
.fa.fa-trash-o:hover {
    color: red;
}
</style>

第二步：修正ASP.NET GridView的TemplateField代码 #

去掉冗余的内联事件和错误属性：

<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" CommandName="Delete">
            <i class="fa fa-trash-o"></i>
        </span>
    </ItemTemplate>
</asp:TemplateField>

如果一定要用内联事件（不推荐） #

如果出于某些原因必须用内联的onmouseover/onmouseout，记得去掉script:前缀，并且不要覆盖整个style属性（不然会丢失之前设置的font-size）：

<i class="fa fa-trash-o" style="font-size:24px;" 
   onmouseover="this.style.color='red';" 
   onmouseout="this.style.color='black';"
></i>

这样修改后，无论是在IE还是其他浏览器，鼠标悬停图标时都会变成红色，移出后恢复黑色啦！

内容的提问来源于stack exchange，提问作者Our Man in Bananas