这些精灵按钮让我抓狂。我几乎可以让他们工作，但不完全是。
我正在玩这个非常简单的精灵图像：
我有一个 jsfiddle 项目>> 这里 如果你想看的话，但如果你只想看一下，代码就在下面。 http://jsfiddle.net/jp2code/PZh9F/1/
对于我的 CSS，我有以下内容：
#menu {
left:10px;
top:50px;
height:300px;
width: 147px;
position:fixed;
}
.sprite {
background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat;
height:50px;
padding-left: 50px;
width:147px;
z-index:1;
}
.sprite a {
background-position: 0px 0px;
color:Red;
vertical-align: middle;
}
.sprite a:hover {
background-position: 0px -50px;
color:Yellow;
}
这样，我的 HTML 就变得简单又小：
<html>
<body>
<ul id="menu">
<li class="sprite">You Are Here</li>
<li class="sprite"><a href="#A">Contact</li>
<li class="sprite"><a href="#B">Projects</li>
</ul>
</body>
</html>
我似乎无法显示活动链接图像（位置 0）或悬停链接图像（位置 50）。
另外，我想找到一种方法使整个矩形区域（50 x 147）成为超链接。
有人可以帮我吗？
这就是你想要得到的吗：http://jsfiddle.net/PZh9F/37/ http://jsfiddle.net/PZh9F/37/ ?
CSS:
#menu { left:10px; top:50px; height:300px; width: 147px; position:fixed; }
.sprite { background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat; height:50px; padding-left: 50px; width:147px; z-index:1; }
.sprite a { background-position: 0px 100px; color:Red; vertical-align: middle; }
.sprite.current { background-position: 0px 0px; }
.sprite:hover { background-position: 0px -50px; }
.sprite:hover a { color:Yellow; }
和 HTML：
<html>
<body>
<ul id="menu">
<li class="sprite current">You Are Here</li>
<li class="sprite"><a href="#A">Contact</li>
<li class="sprite"><a href="#B">Projects</li>
</ul>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
