[SOLUCIONADO] Problema con rollover y sprites

[Mariano_Floyd]

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.

[pzin]

Sino estás utilizando ese código, mejor que pongas el código que estás usando.

¿Dónde quieres realizar el :hover? Al pasar por el ratón por tal sitio y que afecte a tal cosa, digo.

[Mariano_Floyd]

Tienes razón, antes que nada esta es la imagen que estoy usando:
Y asi es como me queda:
El resultado hasta ahí es el deseado, ahora, quiero que al pasar el ratón por cada icono cambie al icono naranja. Hasta ahí se como hacerlo con background-position. Mi problema radica en como aplicar el :hover para tal fin.

Este es mi código actual:

Código HTML:

<div class="right">
                <h2>Redes Sociales</h2>
                <ul class="social">
                    <li id="facebook" ><a href="#" ><img src="images/pixel.gif"/></a></li>
                    <li id="linkedin" ><a href="#" ><img src="images/pixel.gif"/></a></li>
                    <li id="twitter" ><a href="#" ><img src="images/pixel.gif"/></a></li>
                </ul>
               
            </div>
 

Código CSS:

.right .social{
    list-style:none;
    text-align:center;
    padding:10px;
}
 
#facebook img, #linkedin img, #twitter img{
     background: transparent url('../images/social_icons.png') no-repeat;
     height:70px;
     width:70px;
     vertical-align:middle;
}
#facebook img {
 
background-position:0 0;
 
    
}
#linkedin img{
 
background-position:-70px 0;
 
 
}
 
#twitter img {
 
background-position:-140px 0;
 
 
}
 
 
.social li {
 
 
    display:inline;
 
}
 

Gracias por responder.

[Mariano_Floyd]

Ya lo solucione, solo le puse el :hover en la img, lo había intentando antes y no me había funcionado. Parece ser estaba haciendo algo mal.

[pzin]

Ok. ¿Y no sería más correcto hacer el :hover sobre el elemento de la lista?

Código CSS:

li:hover img {
  background-position: //etc
}
 

[Mariano_Floyd]

Estoy de acuerdo, ya lo he corregido y he aplicado el :hover sobre el elemento de la lista. Gracias pzin. Saludos.