CSS Sprites，拼图

Question

这对你们来说可能是个愚蠢的问题..它关于CSS Sprites。我有一个导航，其中包含4个菜单，如..家庭公司服务支持，虽然我使用了一个css精灵，有3个模式/状态静态，悬停和选择（类称为“当前”）。我以前称他们为......

ul#top-nav-links {list-style:none; background:url(../images/nav-bg.png) no-repeat scroll 0 0; width:508px; height:35px; float:left; margin-left:80px; margin-top:33px; padding-left:4px; margin-right:23px;}
ul#top-nav-links li{float:left; position:relative; z-index:99999;}
ul#top-nav-links li a.home01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:100px; height:31px; text-indent:-999px; float:left;}
ul#top-nav-links li a.company01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:150px; height:31px; text-indent:-999px; float:left; background-position:-100px 0px;}
ul#top-nav-links li a.services01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:140px; height:31px; text-indent:-999px; float:left; background-position:-250px 0px;}
ul#top-nav-links li a.support01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:115px; height:31px; text-indent:-999px; float:left; background-position:-390px 0px;}

ul#top-nav-links li a.current{background:url(../images/nav.png) no-repeat scroll 0 -62px; display:block; width:100px; height:31px; text-indent:-999px; float:left;} 

这是我使用的图像

所以我需要在悬停状态下显示中间彩色的一个，虽然最后一个为当前状态，当然当前状态不需要悬停效果..

我知道，应该这样打电话。

ul#top-nav-links li a.company01:hover{background-position:-100px -31px;}

但我很好奇是否应该通过避免将每个菜单分别调用来缩短代码而不是像这样......

ul#top-nav-links li a:hover(background-position:0px -31px;}

上面我试过但是图像的水平定位是不可能的..

有什么想法吗？

如果这个问题混淆，请下载评论.. :)

Answer 1

我不赞成跨浏览器支持，但这至少可以在Chrome 15中使用。

http://jsfiddle.net/tkZMB/

li:hover {
    background-position-y: -31px;
}

您可以将其结合起来以简化整体CSS。

/* General list item declaration */
li { 
    width: 130px; 
    height: 30px; 
    border: 1px solid gray; 
    float: left;
    background: url(http://i.stack.imgur.com/m5HOI.png);
}

/* For each child move menu over */    
li:nth-child(2) {
    background-position-x: -100px;
}

/* On hover slide the background up. */
li:hover {
    background-position-y: -62px;
}

Answer 2

很抱歉，只是将您的代码修改为此，但我希望这可以帮助您生成有效的标记（语义正确）和样式表代码：希望这也能解决浏览器的不一致问题在你的代码中。

HTML：

<ul class="section">
    <li class="home current">
        <a href="#" title="">Home</a>
    </li>
    <li class="company">
        <a href="#" title="">Company</a>
    </li>
    <li class="services">
        <a href="#" title="">Services</a>
    </li>
    <li class="support">
        <a href="#" title="">Support</a>
    </li>
</ul>

CSS：

.section li {
    display: inline;
}
.section a {
    background: url(../images/nav.png) no-repeat;
    display: inline-block;
}
.section .home a {
    background-position: left top;
}
.section .company a {
    background-position: -100px 0;
}
.section .services a {
    background-position: -250px 0;
}
.section .support a {
    background-position: -390px 0;
}
.section .current a {
    background-position: 0 -62px;
}