шрифт-значок - изменение события onmouseover - PullRequest
Новая
       56

шрифт-значок - изменение события onmouseover

0 голосов
/ 21 мая 2018

У меня есть элемент управления ASP.NET gridview с потрясающим шрифтом значком корзины в конце столбца.

Вкл. при наведении курсора Я хочу, чтобы цвет изменился на красный и снова вернулсяпо умолчанию onmouseout .

Вот template field в виде сетки asp.net: 

<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>

так где я ошибаюсь?

Ответы [ 2 ]

0 голосов
/ 21 мая 2018

Вы можете достичь этого только с помощью 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>
0 голосов
/ 21 мая 2018

см. Код ниже, вы забыли . до 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>
...