我有一个 ASP.NET 的网格视图控件,末尾列中有一个字体很棒的垃圾桶图标。
在鼠标悬停时,我希望颜色更改为红色,然后再次返回默认鼠标输出。
以下是 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>
但我显然弄错了,因为当我将鼠标悬停在垃圾桶图标上时没有任何变化。
我也尝试在我的页面中使用 csshover
样式,但同样,没有任何反应:
<style>
.fa fa-trash-o{
color: black
}
.fa fa-trash-o:hover{
color:red;
}
</style>
那么我哪里出错了?
您只能通过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>
请参阅下面的代码,您忘记了.
在 css:https://www.w3schools.com/cssref/css_selectors.asp 中的fa-trash-o
类:selector之前
.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>