Asp Button hover и CSS

Question

У меня есть кнопка управления asp, к которой я применил какой-то стиль. Я хочу, чтобы при наведении на эту кнопку, цвет кнопки должен измениться или что-то в этом роде. Но я не понимаю, почему в CSS не работает функция наведения кнопок !! Пожалуйста помоги. Также, пожалуйста, дайте мне знать, какие наилучшие эффекты мы можем получить при наведении на кнопку.

    <asp:Button ID="btnSearch" runat="server" CssClass="button"  OnClick="btnSearch_Click"     Style="width: 480px;" Text="Search" />

.button
{
    background: white;
    border: solid 1px grey;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #001563;    
    height: 25px;  

}

.button:hover
{
    background: white;
    border: solid 1px grey;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: Red;   
    height: 25px;

}

Answer 1

Пожалуйста, проверьте следующий код:

 <asp:Button ID="btnSearch" runat="server" OnClick="btnSearch_Click"  Style="width: 480px;" CssClass="button" Text="Search" />
      <style type="text/css">
.button
{
    background: white;
    border: solid 1px grey;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #001563;    
    height: 25px;  

}

.button:hover
{
    background: white;
    border: solid 1px grey;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: Red;   
    height: 25px;

}</style>

Answer 2

asp: кнопки отображаются как теги ввода HTML (кнопка отправки), поэтому вы не можете использовать тот же синтаксис CSS, что и гиперссылка.

Это должно работать в браузерах (кроме MSIE):

(примечание: «кнопка» - это название вашего класса)

input.button:hover{
   color: Green;
} 

или изменить все кнопки отправки:

input[type="submit"]:hover{
   color: Green;
} 

Если вы используете в Google методы CSS для перемещения по кнопкам (кнопкам ввода), то вы найдете более совершенные методы CSS и JavaScript.

Answer 3

Пусть стиль кнопки определяется операционной системой. Было бы лучше не пытаться изменить это поведение. В большинстве случаев вы не добьетесь успеха.

Псевдокласс: hover применяется, пока пользователь назначает элемент (с некоторым указательным устройством), но не активирует его. Например, визуальный пользовательский агент может применить этот псевдокласс, когда курсор (указатель мыши) находится над блоком, созданным элементом. Пользовательские агенты, не поддерживающие интерактивные медиа, не должны поддерживать этот псевдокласс. Некоторые соответствующие пользовательские агенты, поддерживающие интерактивные носители, могут не иметь возможности поддерживать этот псевдокласс (например, перьевое устройство).

См. Селекторы

Если вы хотите применить эффект наведения на кнопку, то лучше использовать метку привязки и использовать изображение внутри нее.

a:hover { }