My ASP.NET gridview control includes a font-awesome trash icon in the last column.
I'm trying to make the icon change color to red when I hover over it, and then revert back to its default color when I move my mouse away.
Here is the code for the template field within the ASP.NET gridview:
<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>
When rendered in IE, it looks like this:
<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>
Despite my efforts, the color doesn't change when I hover over the trash can icon.
I've also attempted using CSS hover styles on my page, but that didn't work either:
<style>
.fa fa-trash-o{
color: black
}
.fa fa-trash-o:hover{
color:red;
}
</style>
Can anyone help me figure out what I'm doing wrong?