Question

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

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

Answer 1

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/

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

1 个答案: