March 8, 2012
css sprites – a hover with images not loading correctly
Question by bryceadams
I have some css sprites on my site in the header but when the page loads it often loads several of the 8 separate images just below where it’s meant to be. Then I wait a few seconds or hover my mouse over them and it goes back to the correct positions.
Here’s my CSS:
.x {
display: inline-block }
.x a {
display:block;
width:100px;
height:100px;
overflow:hidden;}
.x a:hover img {
margin-left:-100px;}
and then the HTML goes like this:
<div class='x'><a href='link' alt='y'><img src=
'image' /></a></div>
<div class='x'><a href='link' alt='y'><img
src='image' />
</a></div>
for 8 separate 100×100 squares in a row.
Answer by Starx
The way to define css sprite is a bit different then how you are doing it.
Here is an example of how this can be achieved.
/* This is how to define a main image
.sprite { background: url("../link/to/spriteimage.png") 0px 0px; width: 32px; height: 32px; }
/* Assign an image like this way, by changing the position
.sprite.icon1 { background-position: -32px -32px; }
.sprite.icon1_hover { background-position: -64px -32px; }
Demo
