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;} 

и вот изображение, которое я использовал

так что мне нужно отобразить среднюю цветную при наведении, хотя последняя для текущего состояния, конечно, текущее состояние не нуждается в эффекте наведения ..

Я знаю, это должно называться так ...

* * 1010

но мне любопытно, следует ли каким-то образом сократить этот код, избегая называть каждое меню отдельным, а не вот так ...

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

вышеупомянутый вариант, который я пробовал, но горизонтальное расположение изображения было невозможно ..

Есть мысли?

выпадающий комментарий, если этот вопрос был перепутан ..:)

Answer 1

Извините, только что изменил ваш код к этому, хотя я надеюсь, что это поможет вам создать эффективную разметку (семантически правильную) и коды таблиц стилей: надеюсь, что это также решит проблемы с браузером в ваши коды .

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;
}

Answer 2

Я не уверен в поддержке кросс-браузеров, но это по крайней мере работает в 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;
}