CSS图像精灵错误

我试图用我的提交按钮做一个简单的悬停效果

CSS

HTML

将

#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);
}

您可以在此处看到结果：

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

例如：

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

#submit1, a {
    color: #FFF;
}

#submit1，a

这意味着我不希望我的CSS代码始终应用于

#submit1

和

a

#submit1:hover，a:hover

这意味着我不想将CSS代码应用于

#submit1

和

a

，但仅当我悬停时

---

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

到底是什么问题？谢谢，如果我想向按钮添加一个主文本，当它悬停时，文本会改变颜色，该怎么办。我尝试添加

code

#submit1:hover{code>color:#000；}

code

和

code

#submit1 a{color:#FFF；

code

，但它只将颜色更改为白色，没有更改为带有悬停效果的黑色。我编辑了我的答案，以回答您在评论中提出的问题。

#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);
}

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

#submit1, a {
    color: #FFF;
}