CSS：将鼠标悬停在 HTML 提交按钮上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18599127/
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
CSS: Hover a HTML submit button
提问by Juicy
I'm trying to style a HTML submit button in CSS:
我正在尝试在 CSS 中设置 HTML 提交按钮的样式：
HTML:
HTML：
<input type="submit" value="Yes" id="popUpYes">"
CSS:
CSS：
#popUpYes
{
width: 60px;
height: 30px;
background-color: black;
}
#popUpYes:hover
{
background-color: white;
}
The basic style works but the background does not change color on hover.
基本样式有效，但背景在悬停时不会改变颜色。
采纳答案by userDEV
Your original code works for me. Be sure you don't have any other conflicting styles inherited by the submit button.
你的原始代码对我有用。确保您没有任何其他由提交按钮继承的冲突样式。
回答by Black Sheep
Try this JSfiddle
试试这个JSfiddle
Try this:
尝试这个：
#popUpYes
{
width: 60px;
height: 30px;
background-color: black;
color: white; /* SET COLOR IN WHITE */
}
#popUpYes:hover
{
background-color: white;
color: black; /* SET COLOR IN BLACK */
}
<input type="submit" value="Yes" id="popUpYes">You have to assign the color- attribute for the text.
您必须color为文本分配- 属性。
回答by dotNetE
I tried this is Chrome and it worked.
我试过这是 Chrome，它奏效了。
Try this:
尝试这个：
#popUpYes
{
width: 60px;
height: 30px;
background-color: black; color:#fff;
}
#popUpYes:hover
{
background-color: white;
}
<input type="submit" value="Yes" id="popUpYes">回答by Anoop B.K
As per your question "The basic style works but the background does not change color on hover." , this happens only when you set your BackColor or background-color through properties. your code works fine because you have used css class instead of properties.
根据您的问题“基本样式有效，但背景在悬停时不会改变颜色。” ，只有当您通过属性设置 BackColor 或 background-color 时才会发生这种情况。您的代码运行良好，因为您使用了 css 类而不是属性。
回答by Naveen Kumar Alonekar
回答by Krasimir
The code as it is now works -> http://jsfiddle.net/2wYqd/What is your browser?
现在的代码有效 -> http://jsfiddle.net/2wYqd/你的浏览器是什么？
#popUpYes {
width: 60px;
height: 30px;
background-color: black;
}
#popUpYes:hover {
background-color: white;
}
