输入类型=按钮上的背景颜色：IE 中的悬停状态

Posted 2023-02-21

【中文标题】输入类型=按钮上的背景颜色：IE 中的悬停状态

【英文标题】：Background color on input type=button :hover state sticks in IE

【发布时间】：2011-08-03 11:09:54

【问题描述】：

我有一个 input type=button 设置了背景颜色和一个不同的 :hover - 请参阅 http://jsfiddle.net/hc2Eu/3/

在 IE（所有版本）中 - 当我将鼠标放在按钮上时，移开按钮，然后 mouseup - 背景颜色保持在 :hover 设置中，直到您再次将鼠标悬停在它上面。

有解决办法吗？最好不要用js？ （不需要IE6）

【参考方案1】：

您需要确保图像在前，并在调用背景图像后用逗号隔开。那么它确实有效：

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

【参考方案2】：

<input type="button"> 可能有修复 - 但如果有，我不知道。

否则，一个不错的选择似乎是将其替换为精心设计的 a 元素。

示例：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

优点包括a 元素将在不同（旧）版本的 Internet Explorer 之间保持一致的样式，而无需任何额外工作，而且我认为我的链接看起来比那个按钮更好:)

【讨论】：

我已经想到了 - 但我正在处理一个预先存在的系统，该系统已将逻辑分配给输入元素和表单提交等（请不要询问详细信息 :) 重构所有那些仅仅修复 IE 故障的代码可能不值得。

给你公认的答案 - 因为我认为标准按钮元素不可能做到这一点。

渐变和过渡不能一起工作似乎是唯一的答案：***.com/questions/3790273/…

【参考方案3】：

尝试使用type 属性选择器来查找按钮（也许这也能解决问题）：

input[type=button]

  background-color: #E3E1B8; 


input[type=button]:hover

  background-color: #46000D

【讨论】：

这不是 CSS 选择问题 - 颜色应用正确。当鼠标处于活动状态时将鼠标移出按钮存在一些问题 - .

的问题相同

嗯。我想是时候打败电脑并大喊猥亵了，因为我不知道如何欺骗 IE 来做到这一点。