Estoy intentando hacer un rollover de imagenes en CSS. El método de toda la vida con dos imagenes no me gusta ya que le cuesta un segundo cargar la nueva imagen y queda bastante feo.
Buscando un poco encontré un método usando una imagen y el background-position. Me funciona bien pero tengo un problema y es que para hacer el rollover hay que asignarle la proiedad block y solo puedo hacer un rollover por linea. Yo lo que quiero es hacer 3 0 4 en una linea y me hes imposible.
Lo que quiero es:
Rollover1 // Rollover2 // Rollover3
Lo que tengo es:
Rollover1
Rollover2
Rollover3
A ver si podéis ayudarme.
El código, por si alguien lo quiere usar sería:
En el CSS:
Código:
En el HTML:a#sustituir {
display: block;
width: 170px; /* Depende de nuestra imagen */
height: 52px; /* Depende de nuestra imagen */
text-indent: -9999px;
background:url(img/colectivodoble.gif) top left no-repeat;
}
a#sustituir:hover {
background-position:0 -54px; /* Depende de nuestra imagen */
}
Código:
<a href="#" id="sustituir">Texto</a>
