Question

我想用CSS为html输入按钮实现悬停效果。（在鼠标上方更改边框颜色）。

实际上技术上没有问题 - 而且它正在运行 - 但是我在使用Internet Explorer 7以及IE8时遇到了问题，因为效果只有80％的时间在那里工作。

我还在悬停时更改鼠标光标 - 这样可以正常工作 - 但更改边框（或背景颜色）仅在大多数情况下都有效。有时我用鼠标进入按钮，没有任何反应。

无论如何都要绕过这种行为 - 不使用javascript或代码吹制的包装元素？

有关详细信息，请参阅以下示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html id="document:html" lang="de">
<head><meta content="0" http-equiv="expires" /><meta content="text/html; charset=iso-8859-1" http-equiv="content-type" />
<style type="text/css">
input.linebutton {
    border: 1px solid #BBB;
    margin: 0 2px;
    background-color: #EEE; 
    text-align: left; 
    background-position: 2px 2px;
    background-repeat: no-repeat; 
    padding: 1px 3px 1px 23px;
    width: 0; /* for IE only */
    overflow: visible;
    cursor:pointer;
    height:22px;
}
input.linebutton:hover {
    border: 1px solid #FF8C00;  
    background-color: #EEE; 
    outline: none;
}
input.linebutton:active, .linebutton:focus {
    border: 1px solid #000000;  
    background-color: #EEE; 
    outline: none;
}
.linebutton[class] { /* IE ignores [class] */
    width: auto;
}
</style>
</head>
<body >
<input class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test" />
</body>
</html>

提前致谢！

Answer 1

挖掘坟墓，但我对IE7和输入有同样的问题：悬停。当我将doctype更改为strict时，它在IE7中得到了支持。不需要js。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

IE7 support for hover

Answer 2

不是那么优雅，但也许是一些jQuery？

jQuery("input.linebutton").hover(function() {
  jQuery(this).addClass("HoverClassName");
}, function() {
  jQuery(this).removeClass("HoverClassName");
});

Answer 3

只需用按钮替换input[type=submit]即可。您应该没问题您修改的示例如下：

<button class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test">Submit</button>

如何解决IE7和IE8中的CSS悬停错误？

3 个答案: