CSS: Image Rollover

This page shows how to do image rollover with CSS.

Here is a image rollover. Hover your mouse over it.

Here is the HTML:

<div id="roll86705"></div>

Here is the CSS:

#roll86705 {
 width:128px;
 height:128px;
 background:url(i/tile_A.png)
}

#roll86705:hover {
 background:url(i/tile_B.png)
}

The trick is using the :hover pseudo selector.

You can add the :hover pseudo selector to other element, then specify in CSS for the appearance when user hovers over a HTML element.

For a JavaScript version of image rollover, see: Image Rollover .