CSS Sprite按钮
[英]CSS Sprite Button
问题描述
These Sprite buttons are driving me bonkers. 
这些Sprite按钮让我疯狂。 I can almost get them to work, but not quite. 我几乎可以让他们上班，但并不完全。
I'm playing with this very simple sprite image: 我正在玩这个非常简单的精灵图像：
I've got a jsfiddle project >> HERE << if you want to see that, but the code is below if you just want to look at it. 我有一个jsfiddle项目>> HERE <<如果你想看到它，但如果你只是想看看它的代码如下。
For my CSS, I have the following: 对于我的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;
}
With that, my HTML is simple and small: 有了它，我的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>
I can't seem to get my active link image (at position 0) or my hover link image (at position 50) to show. 我似乎无法显示我的活动链接图像（位置0）或我的悬停链接图像（位置50）。
Also, I'd like to find a way to make the entire rectangular region (50 x 147) the hyperlink. 另外，我想找到一种方法来使整个矩形区域（50 x 147）成为超链接。
Could someone help me, please? 有人可以帮帮我吗？
6 个解决方案
解决方案1
2 2012-08-08 21:25:39
I updated your fiddle: http://jsfiddle.net/PZh9F/12/ 我更新了你的小提琴： http ： //jsfiddle.net/PZh9F/12/
As you ha set the background of the ul (as it should) you also need to change the backgorund position of this same ul on hover, so not for the a as you did. 当您设置ul的背景（应该如此）时，您还需要在悬停时更改此相同ul的backgorund位置，因此不会像您那样更改a 。 Change the text color however should be done with a:hover I hope this points you in the right direction. 更改文本颜色但是应该使用a:hover我希望这会指向正确的方向。
解决方案2
2 已采纳 2012-08-08 21:26:38
Is that what you want to get: http://jsfiddle.net/PZh9F/37/ ? 这是你想要的： http ： //jsfiddle.net/PZh9F/37/ ？
CSS: 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; }
And HTML: 和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>
解决方案3
1 2012-08-08 21:25:11
你申请background ，以<li>标签和background-position ，以<a>的标签，而不是同时应用到同一组的标签。
解决方案4
1 2012-08-08 21:25:31
you defined the background for li.sprite not the hyperlink . 你定义了li.sprite的背景而不是超链接。 that's why when a:hover happens there is no background to go -50px down . 这就是为什么当a：hover发生时没有背景去-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;
}
解决方案5
1 2012-08-08 21:25:48
y轴背景位置的负值应为-50px和-100px。
解决方案6
1 2012-08-08 21:59:26
just a few issues: 只是几个问题：
The anchor tags weren't closed, so that may have caused some issues. 锚标签未关闭，因此可能导致一些问题。
Any time you want something to behave like a link, it should use an anchor tag; 任何时候你想要一些像链接一样的行为，它应该使用一个锚标签; I noticed the first li tag was just text. 我注意到第一个li标签只是文字。 Technically, you can still achieve the same effect, but I'm guessing you're attempting to link to something. 从技术上讲，你仍然可以达到同样的效果，但我猜你试图链接到某些东西。
When you're using html text for links within a button that is using a background image, I recommend putting the text into a span which makes it easier to format. 当您在使用背景图像的按钮中使用html文本作为链接时，我建议将文本放入跨度中，以便更容易格式化。 When you add padding to an anchor tag without using the span, you can get extra padding on the opposite end in some browsers even with a set width. 在不使用跨度的情况下向锚标记添加填充时，即使设置了宽度，也可以在某些浏览器的另一端获得额外的填充。 Just a little trick I learned over the years. 这是我多年来学到的一个小技巧。
When using sprites, make sure you add height, width and display:block properties to the "a" selector. 使用精灵时，请确保将高度，宽度和显示：块属性添加到“a”选择器。 This will ensure that the entire link is clickable. 这将确保整个链接是可点击的。
It looks like some of your hovers are jumping, it might be an issue with your sprite. 看起来你的一些徘徊正在跳跃，这可能与你的精灵有关。 It's crucial that your measurements are accurate. 您的测量结果准确无误至关重要。 If it's even 1px off it can produce an undesired flicker effect. 如果它甚至1px关闭它会产生不希望的闪烁效果。
The complete code is here: http://jsfiddle.net/PZh9F/65/ 完整的代码在这里： http ： //jsfiddle.net/PZh9F/65/
Hope that helps! 希望有所帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.