El mismo ejemplo pero algo más práctico y rápido en su funcionamiento:
ejemplo
Cita: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es">
<head>
<title></title>
<style type="text/css">
ul {margin: 0px;
padding: 0px;
list-style: none;
}
li {margin: 0px;
padding: 0px 0px 15px;
}
a {display: block;
width: 100px;
margin: 0px;
padding: 5px 0px 0px;
height: 32px;
text-align: center;
font-weight: bold;
color: #FFFFFF;
background: url(img/fondos.png) no-repeat;
}
.linkdos {background-position: top right;}
a.linkuno:hover {background-position: left -48px;}
a.linkdos:hover {background-position: right -48px;}
</style>
</head>
<body>
<ul>
<li><a href="#" class="linkuno">link 1</a></li>
<li><a href="#" class="linkdos">link 2</a></li>
</ul>
</body>
</html>
Una sola petición y un cambio de fondo instantáneo sin parpadeo.