Asp 按钮悬停和 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

让按钮的样式由操作系统决定。最好不要尝试修改此行为。大多数时候你不会成功。

:hover 伪类在用户指定一个元素（使用一些指针设备）时应用，但不激活它。例如，当光标（鼠标指针）悬停在元素生成的框上时，可视用户代理可以应用此伪类。不支持交互式媒体的用户代理不必支持这个伪类。一些支持交互式媒体的符合标准的用户代理可能无法支持这个伪类（例如，笔设备）。

见Selectors

如果您想对按钮应用悬停效果，那么最好使用锚标记并在其中使用图像。

a:hover { }

Answer 2

asp:buttons 呈现为 HTML 输入（提交按钮）标签，因此您不能使用与超链接相同的 CSS 语法。

这应该适用于浏览器（除了 MSIE）：

（注意：“按钮”是你的类名）

input.button:hover{
   color: Green;
} 

或更改所有提交按钮：

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

如果您在 Google 上搜索在按钮（输入按钮）上悬停的 CSS 技术，那么您会发现一些更好的 CSS 和 JavaScript 技术。

Answer 3

请检查以下代码：

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