css and rollovers

I’ve recently stopped using javascript to do rollovers when reasonable. It’s much nicer because you don’t have to write onmouseover or onmouseout events, and it works without javascript. It’s also prevents a weird ‘blink’ (especially in IE) when rolling over if the image isn’t loaded in cache.

The trick is to create one image that has both states and assign the background-position of the hover state.

Using the following image and css, you don’t have to worry about javascript.

mouseover image

a.seeMore {
    background: #dce1e4
    url(/images/icons/arrowFull.gif)
    no-repeat top right;
}
a.seeMore:hover {
     background-color:#4f5a62;
     background-position:right -18px;
}

Comments are closed.