Asp 按钮悬停和 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1502124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Asp Button hover and CSS
提问by Himadri
I have an asp button control on which i have applied some style. I want that on hover of this button, the colour of the button should change or something of that sort. But I fail to understand why in CSS the button hover function is not working!! PLease help. Also please let me know what are the best effects we can have for a button hover.
我有一个 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;
}
回答by Himadri
Please check the following code:
请检查以下代码：
<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>
回答by Jim W
asp:buttons render as HTML input (submit button) tags, so you can't use the same CSS syntax as a hyperlink.
asp:buttons 呈现为 HTML 输入（提交按钮）标签，因此您不能使用与超链接相同的 CSS 语法。
This should work in browsers (except MSIE):
这应该适用于浏览器（MSIE 除外）：
(note: "button" is your class name)
（注意：“按钮”是您的班级名称）
input.button:hover{
color: Green;
}
or to change all submit buttons:
或更改所有提交按钮：
input[type="submit"]:hover{
color: Green;
}
If you Google for CSS techniques of doing hover on buttons (input buttons), then you'll find some better CSS and JavaScript techniques.
如果您在 Google 上搜索在按钮（输入按钮）上悬停的 CSS 技术，那么您会发现一些更好的 CSS 和 JavaScript 技术。
回答by rahul
Let the style of the button be decided by the operating system. It would be bette not to try modifying this behavior. Most of the times you won't be successful.
让按钮的样式由操作系统决定。最好不要尝试修改此行为。大多数时候你不会成功。
The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).
:hover 伪类适用于用户指定元素（使用某些指针设备）但不激活它的情况。例如，当光标（鼠标指针）悬停在元素生成的框上时，可视化用户代理可以应用这个伪类。不支持交互式媒体的用户代理不必支持这个伪类。一些支持交互式媒体的符合要求的用户代理可能无法支持这个伪类（例如，笔设备）。
See Selectors
请参阅选择器
If you want to apply hover effect to a button then better use an anchor tag and use an image inside that.
如果要将悬停效果应用于按钮，则最好使用锚标记并在其中使用图像。
a:hover { }
