CSS Sprite按钮 [英] CSS Sprite Button
问题描述
这些Sprite按钮驱动着我。
我在玩这个非常简单的sprite图片：
我有a jsfiddle project >> 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很简单： / p>
< html>
< body>
< ul id =menu>
< li class =sprite>你在这里< / li>
< li class =sprite>< a href =＃A>联系人< / li>
< li class =sprite>< a href =＃B> Projects< / li>
< / ul>
< / body>
< / html>
我似乎无法获得我的活动链接图片（位置0）或我的悬停链接图片（位置50）显示。
此外，我想找到一种方法来制作整个矩形区域
>
这是你想得到的： http://jsfiddle.net/PZh9F/37/？
CSS：
#menu {left：10px ; top：50px; height：300px; width：147px;位置：固定; }
.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;红色; 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>你在这里< / li>
< li class =sprite>< a href =＃A>联系人< / li>
< li class =sprite>< a href =＃B> Projects< / li>
< / ul>
< / body>
< / html>
These Sprite buttons are driving me bonkers. 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.
For my CSS, I have the following:
#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>
<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.
Also, I'd like to find a way to make the entire rectangular region (50 x 147) the hyperlink.
Could someone help me, please?
Is that what you want to get: 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; }
And 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>
这篇关于CSS Sprite按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
