Cambiar imagen en hover

[bcjmpr]

Necesito ayuda con un código a mi parecer bastante sencillo, pero no logro hacerlo funcionar. Tengo una imagen como enlace a una página de facebook, la idea es que se muestre de color gris por default, y al pasar el mouse encima cambie a color azul. Tengo ambas imágenes por separado y mi código es como sigue:

Código HTML:

<div id="header">
<a href="facebook.com/vinculo" class="over">
<img class="social" src="css/images/facebook_off.png" alt="facebook" width="84" height="22" />
</a>
</div>
 

Y en CSS tengo lo siguiente:

Código CSS:

a.over:hover
{
width: 84px;
height: 22px;
background-image: url("images/facebook_on.png");
background-repeat: no-repeat;
}
 

Y lo que sucede es que al pasar el mouse sobre el vínculo aparece la imagen azul pero debajo de la gris, es decir, se ve desfasada.

He intentado otras maneras, por ejemplo he quitado la imagen del html y la he agregado a una clase en CSS pero fue peor porque ninguna imagen aparecía. ¿Me pueden ayudar? ¿qué estoy haciendo mal?

[maycolalvarez]

se debe a que css aplica las imágenes sobre el background, y tu tienes la otra sobre un <img>, son diferentes y la imágen de la etiqueta img siempre solapará a la de fondo porque tiene una posición superior en el orden Z.

tienes 2 opciones:

-hacer el cambio con javascript:

<img ... onmouseover="this.src='css/images/facebook_on.png';" onmouseout="this.src='css/images/facebook_off.png';" />

-eliminar la <img> y usar un div con el tamaño de la imagen para colocar con CSS la imagen del botón.

[bcjmpr]

Gracias por responder. Ya lo hice con javascript y no tuve problema, pero por cuestiones de accesibilidad prefiero conseguir el efecto con CSS. Ya quité la etiqueta <img> de html y dejé lo siguiente:

Código HTML:

<div id="header">
<div class="over"><a href="facebook.com/vinculo"></a></div>
</div>
 

Y el CSS:

Código CSS:

.over
{
width: 84px;
height: 22px;
background-image: url("images/facebook_off.png");
background-repeat: no-repeat;
}
 
a.over:hover
{
width: 84px;
height: 22px;
background-image: url("images/facebook_on.png");
background-repeat: no-repeat;
}
 

El resultado es que sólo aparece la imagen apagada (gris) pero lo extraño es que ni siquiera como vínculo, sólo como imagen. Agradecería un poco más de guía.

[ArturoGallegos]

prueba cambiar tu html de esta forma

Código HTML:

<div id="header">
    <a href="facebook.com/vinculo" class="over"></a>
</div>
 

y tu css

Código CSS:

.over
{display:block;
width: 84px;
height: 22px;
background:#f00 url("images/facebook_off.png");
background-repeat: no-repeat;
}
 
.over:hover
{
width: 84px;
height: 22px;
background:#0f0 url("images/facebook_on.png");
background-repeat: no-repeat;
}
 

el truco esta en aplicar el css al link directamente, observa el css y seguro entenderás donde estaba tu error

nota:los colores en el fondo los puse meramente para hacer la prueba y ver que funcionara

[bcjmpr]

Gracias por responder Ag666.

Hice los cambios que me sugieres pero extrañamente ahora no aparece ninguna imagen. El cursor cambia cuando paso el mouse por encima de donde debería estar el vínculo, pero no se ve nada, ni siquiera los colores que agregué en el CSS. Pensé que podría interferir el overflow: hidden que tengo en el #header (porque tengo contenido variable), pero lo removí y aún así no sale nada.

Ayuda, en verdad no quiero tener que recurrir a javascript.

[ArturoGallegos]

?¿ utilizas la clase over en algun otro elemento? que se este contra poniendo con otra clase o id? tambien revisa la url de la imagen que este correcta

porque si pruebas el codigo como te lo puse en un html vació veras que si funciona y aunque no exista la imagen hace el cambio de color

[bcjmpr]

¡Ag666, tenías razón! Tu código era correcto, lo que pasaba era que yo lo tenía anidado en otra clase que estaba interfiriendo. Eliminé la clase, metí el código directo y ya funciona a la perfección.

¡Gracias!