html - 具有不同背景位置的 Sprite 菜单

我们如何更改代码以使Sprite菜单的每个元素的背景位置不同？

CSS：

#sd_menue  { width: 266px; margin-top: 211px; float: left; }
#sd_menue li { list-style-type: none; }
#sd_menue a span { display: none; }
#sd_menue a:hover, #sd_menue a.selected { background-position: 0px -46px; }
#sd_menue a.wohnbereiche{ background-image: url('sd1.png'); }
#sd_menue a.fliesen { background-image: url('sd2.png'); }
#sd_menue a.bad { background-image: url('sd3.png'); }
#sd_menue a.kueche { background-image: url('sd4.png'); }
#sd_menue a.aussenbereich { background-image: url('sd5.png'); }
#sd_menue a.pflasterarbeiten { background-image: url('sd6.png'); }

最佳答案

CSS：

#sd_menue  { width: 266px; margin-top: 211px; float: left; }
#sd_menue li { list-style-type: none; }
#sd_menue a span { display: none; }
#sd_menue a:hover, #sd_menue a.selected {
    background:url("http://spritedatabase.net/files/gba/1032/Sprite/DonaldMugs.png") 0 5px;
}
#sd_menue a.wohnbereiche{
    background:url("http://spritedatabase.net/files/gba/1032/Sprite/DonaldMugs.png") -5px -15px;
}

/ *悬停效果。背景位置偏移了一点。* /

#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>

这是一个JSFiddle：http://jsfiddle.net/CJxHa/