css - CSS图像精灵错误

Question

我正在尝试用我的提交按钮制作一个简单的悬停效果

CSS

#submit1 a:hover{
background-position: -1px -56px ;
background-image:url(sprites.png);

}

#submit1{
background-position: -140px -58px ;
width: 112px;
height: 33px;
background-image:url(sprites.png);
}

HTML

<div id="submit1">
<a href="#">
</a>
</div>

Answer 1

变成#submit1 a:hover_#submit1:hover

#submit1:hover {
    background-position: -1px -56px ;
    background-image:url(sprites.png);
}

#submit1 {
    background-position: -140px -58px ;
    width: 112px;
    height: 33px;
    background-image:url(sprites.png);
}

你可以在这里看到结果：http: //jsfiddle.net/eu3zc/

编辑： 关于您的评论，当您编辑多个元素时添加逗号。

例子：

#submit1:hover, a:hover {
    color: #000;
}

#submit1, a {
    color: #FFF;
}

#submit1, a#submit1这意味着我不希望我的CSS 代码a始终适用。

#submit1:hover, a:hover这意味着我不想应用我的 CSS 代码#submit1，a但只有当我悬停时。

您可以通过添加更多逗号来添加更多元素，以将相同的 CSS 代码应用于所有元素。