lechina2000
New Member
Little question here, i have a sprite image that contain icons with normal and hover effects..And this is the css i have for now..\[code\].wi{ background-image:url(images/icons/small/wi.png); background-repeat:no-repeat; display:block; overflow:hidden; height:24px; width:24px;}.wi-delete{background-position:0 0;}.wi-edit{background-position:-24px 0;}.wi-fullscreen{background-position:-48px 0;}.wi-imageedit{background-position:-72px 0;}.wi-download{background-position:-96px 0;}.wi-tags{background-position:-130px 0;}.wi-windowed{background-position:-154px 0;}\[/code\]As you can see, the normal state of the icons is always with background position \[code\]Y = 0\[/code\], so the Hover images are all at \[code\]Y = -24px\[/code\]My html for the icons is:\[code\]<div id="something" class="wi wi-delete"></div>\[/code\]The question is: it is possible to change only the Y position so i can assign a single CSS line for all icons Hover state, instead to have a css line for every icon?Something like:\[code\].wi:hover{background-position: auto -24px;}\[/code\]instead\[code\].wi-delete:hover{background-position:0 -24px;}.wi-edit:hover{background-position:-24px -24px;}..and so on..\[/code\]