CSS: Hover State images cache

Question

when we define hover state of anything CSS... & on hover state we change the background:url(\'image path\'); will this image be preloaded of will be downloa

Answer 1

If you have a div of height 20px, say, and want a background image to change on hover, use an image with both the no-hover and hover graphics in it, with the no-hover at the top, and the hover image at the bottom. Both parts should be the hight of your div, in this case, 20px. Then, set your CSS background-position first to 0px 0px (top left). This is default (no hover).

When the user hovers over the div, set the background-position to 0px -20px (20px up). This will move the background image up by 20px, showing the bottom half of the sprite, which is the hover graphic. When the mouse is removed from the div, the sprite will fall back to it's original position.

CSS:

.hoverDiv          /* Normal state */
{
    background: url('images/img.png');
    background-position: 0px 0px;
}

.hoverDiv:hover    /* Hover state */
{
    background-position: 0px -20px;     /* Move background up by 20px, hiding the top image */
}

If you have a div of different height, just change the 20px bits with the height of the div.

If your sprites are side by side as opposed to on top of each other, move the X axis by using background-position: -20px 0px; instead of 0px -20px;. Of course, you can move the background positively too.

Hope this helps,

James