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

1 回答 1

2

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/

于 2013-05-03T17:12:17.933 回答