html - CSS Sprite ，拼图

Question

这对你们来说可能是个愚蠢的问题。它是关于 CSS Sprites 的。我有一个包含 4 个菜单的导航，例如 .. HOME COMPANY SERVICES SUPPORT 尽管我使用了一个 css Sprite ，它具有 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;
}