如何解决在IE7和IE8 CSS悬停错误?
我想用CSS实现HTML输入按钮的悬停效果。 (改变鼠标悬停的边框颜色)。
其实在技术上没有问题 - 它正在工作 - 但是我在IE7和IE8方面都遇到了问题,因为效果只有80%的时间。
我也改变了mousecursor悬停 - 这是没有问题的工作 - 但改变边界(或背景颜色)只在大多数时间工作。 有时候我用鼠标进入按钮并没有任何反应。
无论如何要规避这种行为 - 不使用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>
提前致谢!
挖掘坟墓,但我有同样的问题与IE7和输入:悬停。 当我将doctype更改为严格时,它支持IE7。 没有js需要。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
IE7支持悬停
不是很优雅,但也许一些jQuery?
jQuery("input.linebutton").hover(function() {
jQuery(this).addClass("HoverClassName");
}, function() {
jQuery(this).removeClass("HoverClassName");
});
只需用按钮替换你的input[type=submit]
,你应该没问题。
你修改的例子会像这样:
<button class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test">Submit</button>
链接地址: http://www.djcxy.com/p/40503.html
上一篇: How to fix CSS hover bug in IE7 and IE8?
下一篇: CSS3 Border Opacity?