CSS input type=button 上的背景颜色：悬停状态在 IE 中保持不变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5628507/
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
Background color on input type=button :hover state sticks in IE
提问by ScottR
I have an input type=button with a background color set and a different one on :hover - see http://jsfiddle.net/hc2Eu/3/
我有一个输入类型=按钮，背景颜色设置和不同的：悬停 - 请参阅http://jsfiddle.net/hc2Eu/3/
In IE (all versions) - when I mouse down on the button, move off the button, then mouseup - the background color stays in the :hover setting until you mouse over it again.
在 IE（所有版本）中 - 当我将鼠标放在按钮上时，移开按钮，然后鼠标向上 - 背景颜色保持在 :hover 设置中，直到您再次将鼠标悬停在它上面。
Is there some workaround for this? Preferably not with js? (IE6 not necessary)
有什么解决方法吗？最好不要用js？（不需要IE6）
回答by thirtydot
There might be a fix to <input type="button">- but if there is, I don't know it.
可能有一个修复<input type="button">- 但如果有，我不知道。
Otherwise, a good option seems to be to replace it with a carefully styled aelement.
否则，一个不错的选择似乎是用精心设计的a元素替换它。
Example: http://jsfiddle.net/Uka5v/
示例：http: //jsfiddle.net/Uka5v/
.button {
background-color: #E3E1B8;
padding: 2px 4px;
font: 13px sans-serif;
text-decoration: none;
border: 1px solid #000;
border-color: #aaa #444 #444 #aaa;
color: #000
}
Upsides include that the aelement will style consistently between different (older) versions of Internet Explorer without any extra work, and I think my link looks nicer than that button :)
优点包括该a元素将在不同（旧）版本的 Internet Explorer 之间保持一致的样式，无需任何额外工作，我认为我的链接看起来比那个按钮更好 :)
回答by Blender
Try using the typeattribute selector to find buttons (maybe this'll fix it too):
尝试使用type属性选择器来查找按钮（也许这也会解决它）：
input[type=button]
{
background-color: #E3E1B8;
}
input[type=button]:hover
{
background-color: #46000D
}
回答by Jason Paul
You need to make sure images come first and put in a comma after the background image call. then it actually does work:
您需要确保图像首先出现并在背景图像调用后放入逗号。那么它实际上确实有效：
background:url(egg.png) no-repeat 70px 2px #82d4fe; /* Old browsers */
background:url(egg.png) no-repeat 70px 2px, -moz-linear-gradient(top, #82d4fe 0%, #1db2ff 78%) ; /* FF3.6+ */
background:url(egg.png) no-repeat 70px 2px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d4fe), color-stop(78%,#1db2ff)); /* Chrome,Safari4+ */
background:url(egg.png) no-repeat 70px 2px, -webkit-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Chrome10+,Safari5.1+ */
background:url(egg.png) no-repeat 70px 2px, -o-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Opera11.10+ */
background:url(egg.png) no-repeat 70px 2px, -ms-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82d4fe', endColorstr='#1db2ff',GradientType=0 ); /* IE6-9 */
background:url(egg.png) no-repeat 70px 2px, linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* W3C */
