Home/ Questions/Q 6980189
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T17:58:56+00:00

May be this seems silly question for you guys.. Its about CSS Sprites. I

  • 0

May be this seems silly question for you guys.. Its about CSS Sprites. I have a navigation which contains 4 menus like.. HOME COMPANY SERVICES SUPPORT although I used a css sprite that have 3 mode/state for static, hover and selected(class called ‘current’). I used to call them like..

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

and here is the image I used enter image description here

so I need to display the middle colored one on hover state, although the last one for the current state, of course the current state wasn’t need hover effect..

I know, It should call like this.. 

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

but I curious if somehow that code should be shortened by avoiding to call each menu as separate instead like this…

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

the above one I tried but the horizontal positioning of the image wasn’t possible..

Any thoughts?

drop down a comment, if this question was confused.. 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not positive about cross-browser support, but this at least works in Chrome 15.

    http://jsfiddle.net/tkZMB/

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

    You could combine this to simplify your overall CSS too. 

    /* General list item declaration */
li { 
    width: 130px; 
    height: 30px; 
    border: 1px solid gray; 
    float: left;
    background: url(https://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;
}
    • 0