我的网页中有一个带有“btnNewL1”类的按钮。我的 CSS 类如下
.btnNewL1
{
background: url(../images/btnbgnew.png);
border:1px solid #818181;
padding-left:3px;
padding-right:3px;
font-family:Arial;
font-size:12px;
padding-top:1px;
padding-bottom:1px;
}
当用户将鼠标放在按钮上时，我想更改外观，例如更改背景图像和更改边框颜色等...。我想这样做会CSS本身。 IE6 IE 7 , Firefox 应该支持它
如何做到这一点？
【问题讨论】：
【讨论】：
这个 SO 问题"How to use ‘hover’ in CSS" 可能会对您有所帮助。
我认为您正在寻找 :hover 类。
这是w3schools 的示例。
这个例子是关于颜色的，但我相信你可以用其他样式做到这一点。
【讨论】：
.btnNewL1:hover{
background: url(../images/different.png);
}
【讨论】：
你想要:hover 伪类。将.btnNewL1:hover { ... } 用于您的鼠标悬停样式。
有关伪类的更多信息，另请参阅CSS2 spec。
【讨论】：
不幸的是，IE6 不支持 :hover 伪选择器在<a>以外的任何其他元素上。
如果你想在 IE6 上实现 :hover，你可以：
a) 如果可能，请将您的 <input
class="btnNewL1" type="button"
value="click me!" /> 更改为 <a
class="btnNewL1" href="#">click
me!</a>。您将需要添加 display:block 和一些其他 CSS 规则。这将使用<a> 标签简单地“模拟”按钮。这不是完美的解决方案，因为有时您必须使用正确的<input>（即在使用 asp.net 控件时）。
b) 使用 javascript 解决方法，jQuery 中的示例是：
<script type="text/javascript">
$(document).ready(function(){
$("input.btnNewL1").mouseover(function(){
$(this).toggleClass('buttonSelected');
}).mouseout(function(){
$(this).toggleClass('buttonSelected');
});
});
</script>
<input type="button" value="click me!" class="btnNewL1" />
c) 像这样包装你的代码：
<a class="acont" href="#"><input type="button" value="click me!" /></a>
这样你就可以使用 CSS 了：
.acont:hover input { background:red; }
这将完成这项工作，但据我所知，这不是有效的 HTML（<input> 不应放在 <a> 标记内）
你会选择哪一个 - 由你决定。这篇文章的重点是：:hover 伪选择器只能在 IE6 上用于锚元素
【讨论】：