Question

我的网页上有一个按钮“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;
}

当用户将鼠标放在按钮上时，我想要像bg图像的变化和边框颜色的变化等那样的外观。我想这样做就是CSS本身。它应该得到IE6 IE 7，Firefox

的支持

怎么做？

Answer 1

不幸的是：IE6 不支持除<a>以外的任何其他元素的悬停伪选择器。

如果您希望实施：将鼠标悬停在IE6上，您可以：

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上用于锚元素

Answer 2

查看pseudo-classes

.btnNewL1:hover{
    background: url(../images/different.png);
}

Answer 3

将两个图像合并为一个，然后更改背景位置。

CSS sprite

CSS Sprites: Image Slicing’s Kiss of Death

Answer 4

这个问题"How to use ‘hover’ in CSS"可能会对您有所帮助。

我认为您正在寻找:hover课程。

以下是w3schools的示例。

示例是为了颜色，但我相信你可以用其他样式做到这一点。

Answer 5

你想要:hover伪类。使用.btnNewL1:hover { ... }表示鼠标悬停样式。

有关伪类的更多信息，另请参阅CSS2 spec。

CSS：在悬停上更改按钮外观

5 个答案: