Problema con Hover en Footer

[luisfer91]

Buenas, llevo unas horitas probando y probando para conseguir hacer un hover con unos botones de facebook que he puesto en mi footer.

El tema es que algo mal debo estar haciendo en la hoja de estilos ya que no consigo que me identifique las clases que creo.

He probado también con el onmouseover y no he conseguido nada tampoco xD, puede ser que solo funcione con .gif onmouseover?
Bueno independientemente de ello me gustaria conseguir hacerlo con css ya que es más simple.

Haber si podeis ayudarme :D Este es el codigo del footer:

Código:

<div id="footer">

    <div class="botones-footer">
 <a style="float:left;position:relative;left:120px;top:20px;" id="fcbuton1" href="http://www.facebook.com/BauliaWeb" target="_blank"><img src="http://baulia.com/oc-content/themes/olxES/images/facebook-black.png" ></a>
	<a style="float:left;position:relative;left:140px;top:20px; " id="fcbuton2" href="https://twitter.com/AnunciosBaulia" target="_blank"><img src="http://baulia.com/oc-content/themes/olxES/images/twitter-black.png" ></a>
	<a style="float:left;position:relative;left:160px;top:20px; " id="fcbuton3" href="http://www.youtube.com/channel/UC4wg775jHQVhkoFqyxC7IAA" target="_blank"><img src="http://baulia.com/oc-content/themes/olxES/images/youtube-black.png" ></a>
	<a style="float:left;position:relative;left:180px;top:20px; " id="fcbuton4" href="http://www.linkedin.com/profile/view?trk=tab_pro&id=225864438" target="_blank"><img src="http://baulia.com/oc-content/themes/olxES/images/linkedin-black.png" ></a>
	<a style="float:left;position:relative;left:200px;top:20px;" id="fcbuton5" href="http://baulia.com/blog" target="_blank"><img src="http://baulia.com/oc-content/themes/olxES/images/blog-black.png" ></a></div>
    

<div class="inner">	<span>  &copy Baulia 2013</span>
           <a href="<?php echo osc_contact_url(); ?>"><?php _e('Contacto', 'olx') ; ?></a> |
        <?php osc_reset_static_pages() ; ?>
        <?php while( osc_has_static_pages() ) { ?>
            <a href="<?php echo osc_static_page_url() ; ?>"><?php echo osc_static_page_title() ; ?></a> |
        <?php } ?>

	</div>
</div>
	</div>

Y este es el codigo que estoy utilizando en css

#footer .botones-footer a.fcbuton1 {background: url(../images/facebook-black.png);}
#footer .botones-footer a.fcbuton1:hover { background: url(../images/facebook2.png);}

Gracias por adelantado :D
Saludos!

[pzin]

Hola.

Es como poco de buena educación el poner un código ordenado y limpio para que alguien te ayude.

Lo que estás intentando, no te va a funcionar. O mejor dicho, seguramente está funcionando. Pero por mucho que hagas, no vas a conseguir que un fondo se ponga por delante de una imagen.

Y a ver cómo te digo que haber, hay algo mal en tu gramática. Vaya, hecho.

[luisfer91]

Si ya me di cuenta lo acabo de arreglar así, lo siento por el copia pega del código desordenado :S.

Os muestro como lo he puesto para que funcione:

<style type="text/css">
a.fcbutton1{ background: url(../images/facebook-black.png);}
a.fcbutton1:hover { background: url(../images/facebook2.png);}
</style>
<a style="width:45px; height:45px;float:left;position:relative;left:120p x;top:20px;" class="fcbuton1" href="http://www.facebook.com/BauliaWeb" target="_blank"></a>

[luisfer91]

perdona me equivoque, lo soluciones asi: en footer.php puse:

<div id="footer">

<div class="botones-footer">

<a style="width:45px; height:45px;float:left;position:relative;left:120p x;top:20px;" class="fcbuton1" href="http://www.facebook.com/BauliaWeb" target="_blank"></a>

y en css

#footer .botones-footer a.fcbuton1 {float:left;position:relative;left:120px;top:20px; background: url(../images/facebook-black.png);}
#footer .botones-footer a.fcbuton1:hover { background: url(../images/facebook2.png);}

[pzin]

Claro, eso si.

Ahora el único problema que tienes, es de accesibilidad. Tienes un enlace vacío. Que tampoco será demasiado bueno para cuestiones de SEO.

[luisfer91]

mmm, como podría arreglarlo, lo que el link esta allí (aunque simplemente es la fanpage)

Por que lo que si que noto es que hay una milésima de segundo cuando pongo el mouse encima de la imagen en la que no hay ninguna imagen... se puede pulir eso?
Disculpas si hay faltas de ortografía.