Html 具有不同背景位置的精灵菜单

我们如何更改代码，使每个元素具有不同背景位置的精灵菜单

CSS:

CSS:

/*悬停效应。背景位置移动了一点*/

#sd_menue a.wohnbereiche:hover{
    background:url("http://spritedatabase.net/files/gba/1032/Sprite/DonaldMugs.png") -25px -15px;

}

然后你会像这样使用它们：

<div id='sd_menue'>
    <a class='wohnbereiche'>Link</a>
</div>

您能否详细说明您的目标？你希望他们有什么不同？我不太明白你想做什么。在这个网站上，会有一个带有两个元素的精灵的边栏，每个导航元素的高度都不一样。如何编写代码，使每个元素都有一个特定的悬停位置？因为在您的代码中，每个悬停状态的背景位置都是相同的？您的意思是，如果您将鼠标悬停在.fliesen上，则它的悬停图像与悬停在.bad上时不同吗？只要声明
a.fliesen:hover{background position:position OF IMAGE；}
@DanielHernandez在这里检查一下，看看这是不是你想要的（我用了一只鸭子的精灵，但你可以用任何精灵）：我会测试它，当解决方案一切顺利时，我会接受你的答案。如果你能投票反对我的问题，那就太好了。非常感谢。
#sd_menue a.wohnbereiche:hover{
    background:url("http://spritedatabase.net/files/gba/1032/Sprite/DonaldMugs.png") -25px -15px;

}

<div id='sd_menue'>
    <a class='wohnbereiche'>Link</a>
</div>