Hey there, I have a query regarding a sprite image that contains icons with both normal and hover effects.
Here is the current CSS code I am using:
.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;}
Currently, all icons have their normal state at Y = 0, while the hover images are located at Y = -24px.
The HTML for the icons looks like this:
<div id="something" class="wi wi-delete"></div>
Now my question is: Is it possible to change only the Y position so that I can apply a single CSS line for all icon's hover states, instead of having a separate line for each icon?
Something along the lines of:
.wi:hover{
background-position: auto -24px;
}
Instead of having individual lines like:
.wi-delete:hover{background-position:0 -24px;}
.wi-edit:hover{background-position:-24px -24px;}
..and so on..