CSS雪碧按钮
这些雪碧按钮正在驱动我疯狂。我几乎可以让他们工作，但不完全。CSS雪碧按钮
我与这个非常简单的精灵图像再生：
，如果你想看到我有一个项目的jsfiddle >> HERE <<，但代码如下，如果你只是想看看在它。
对于我的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/？
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>
你申请background到<li>标签和background-position到<a>标签，而不是同时应用到同一组的标签。
您为li.sprite定义的背景不是超链接。这就是为什么当一个：悬停发生时，没有背景下去-50px。
.sprite a {
background-image: url('http://www.jp2code.net/logos/jp2Rollover.png');
background-position: 0px -100px;
color:Red;
vertical-align: middle;
display:block;
width:147px;
height:50px;
}
.sprite a:hover {
background-position: 0px -50px;
}
我更新了你的提琴：http://jsfiddle.net/PZh9F/12/
正如你哈设置UL的背景（因为它应该），你也需要改变悬停此相同ul的backgorund位置，所以不为a和你一样。更改文字颜色，但应该与a:hover完成我希望这可以指出你在正确的方向。
y轴的背景位置应该有负值-50px和-100px。
只是几个问题：
锚标记未关闭，这样就可能造成一些问题。如果您希望某些行为类似于链接，那么您应该使用锚标签;我注意到第一个li标签只是文本。从技术上讲，你仍然可以达到同样的效果，但我猜你正试图链接到某个东西。
当您在使用背景图像的按钮内使用html文本作为链接时，我建议将文本放入跨度中，以便于格式化。当您将填充添加到锚标签而不使用跨距时，即使设置了宽度，也可以在某些浏览器的另一端获得额外的填充。只是我多年来学到的一个小技巧。
使用精灵时，请确保将高度，宽度和显示：块属性添加到“a”选择器。这将确保整个链接是可点击的。
它看起来像你的一些悬停跳跃，这可能是你的精灵的问题。测量结果准确至关重要。如果它只有1px，可能会产生不希望的闪烁效果。
完整的代码是在这里： http://jsfiddle.net/PZh9F/65/
希望帮助！
这几乎就是我所追求的。您刚发布的版本（＃65）的第二张图片（@ 50px）显示在“您在这里”部分，而不是第一张图片（@ 0px）。有没有一种方法可以让您将“你在这里”部分变成深灰色而不是超链接？ – jp2code 2012-08-09 01:18:43
我不确定为什么你不希望它充当超链接，但是所有你需要做的使用深灰色背景图片是删除活动类。如果您不打算将它用作链接（将您带到另一个页面），则将样式应用到“li”选择器而不是“a”选择器。 – jenhan 2012-09-17 16:02:31
嗨jenhan。如果Menu具有PageA，PageB和PageC，但显示的是PageA，则Menu.PageA不需要是链接。工作，最终结果是[这里]（http://www.jp2code.net）。 – jp2code 2012-09-17 16:25:54
哦！大概。 “你在这里”应该是死链接，尽管（底部雪碧）。我要看看你现在做了什么... – jp2code 2012-08-08 21:27:36
@ jp2code我在我的评论中更新了链接。希望现在一切都是按需要的。 – 2012-08-08 21:30:57
显然，它很重要，我如何指定标签，我不能（不应该）使用负值作为我的初始位置。凉！ – jp2code 2012-08-08 21:38:41