Buenas dias/tardes/noches. Estoy maquetando una web y me encuentro con un problema al hacer un rollover con sprites. Es la primera vez que lo estoy aplicando, y me estoy guiando de esta web:
http://librosweb.es/css_avanzado/cap...y_sprites.html (perdón si es spam).
Aplicando código de la manera que esta pagina lo plantea:
Código:
<h3>Previsiones meteorológicas</h3>
<p id="localidad1"><img src="imagenes/pixel.gif" /> Localidad 1: soleado, máx: 35º, mín: 23º</p>
<p id="localidad2"><img src="imagenes/pixel.gif" /> Localidad 2: nublado, máx: 25º, mín: 13º</p>
<p id="localidad3"><img src="imagenes/pixel.gif" /> Localidad 3: muy nublado, máx: 22º, mín: 10º</p>
<p id="localidad4"><img src="imagenes/pixel.gif" /> Localidad 4: tormentas, máx: 23º, mín: 11º</p>
Código:
#localidad1 img, #localidad2 img, #localidad3 img, #localidad4 img {
height: 32px;
width: 32px;
background-image: url("imagenes/sprite2.png");
background-repeat: no-repeat;
vertical-align: middle;
}
#localidad1 img {
background-position: 0 0;
}
#localidad2 img {
background-position: -32px 0;
}
#localidad3 img {
background-position: 0 -32px;
}
#localidad4 img {
background-position: -32px -32px;
}
Obtengo un buen resultado, el problema esta al intentar aplicarle un :hover. Mi duda es que no se como aplicarle el :hover al trabajar sobre las img.
Quiero destacar, que yo no estoy trabajando con párrafos, si no con una lista con enlaces dentro.
Me podrían echar alguna mano en esto por favor?
Desde ya les agradezco. Saludos
Pd: Estoy trabajando en local así que no tengo la web subida aun.