Como crear un menu de imagenes

[DiifoOtz]

Hola vengo a pedir ayuda con un problema que no logro solucionar.

Estoy realizando un menu de imagenes un trabajo personal para aprender HTML y CSS.

La funcion del menu es la de mostrar iconos de redes sociales como twitter y facebook y despues de pasar el mouse sobre el cambiar de color y aspecto.

codigo:

Código HTML:

<div id="bookmarks">
            <ul>
            <li><a href="#" class="facebook"><img alt="" title="asdasd" src="images/socialicons/facebook.png" /></a></li>
            <li><a href="#" class="twitter"><img alt="" src="images/socialicons/twitter.png" /></a></li>
            <li><a href="#" class="google"><img alt="" src="images/socialicons/google.png" /></a></li>
            <li><a href="#" class="youtube"><img alt="" src="images/socialicons/youtube.png" /></a></li>
            <li><a href="#" class="rss"><img alt="" src="images/socialicons/rss.png" /></a></li>
            </ul>
        </div>
 

es simple la estructura pero al agregar css usando HOVER y agregando una imagen diferente a cada uno ocurre el error puesto que la imagen se muestra debajo de la imagen original. Intente agregandoles un position y un z-index pero nada.

Además intente haciendolo con jquery pero no logro hacerlo puesto que se poco de este frame. En jquery intente haciendolo asi

Código Javascript:

$(document).ready(function(){
    $('.facebook').mouseover(function(e){
        e.preventDefault();
        $(this).attr('src', 'images/socialicons/facebook-red.png');
    });
});
 

si me puedieran ayudar es algo simple el ejercicio pero no logra con la solucion

[moro666]

INCREIBLE! Pero como puedes haber hecho todo esto bien y no darte cuenta!!!

Haz diferentes classes o id's para cada boton en css y no pongas la imagen dentro del boton en html, sino que la pongas de background en el css de cada boton, y con el mismo css lo del hover o la propiedad que quieras, pero no pongas <img> dentro de un <a> que quieres que cambie, usa solo css!

[DiifoOtz]

@moro666 ya comprendi lo que trataste de explicar pero antes de tu respuesta lo logre solucionar con Jquery ya que no me di cuenta de donde puse el class el cual fue en la etiqueta A pero le post puse la etiqueta img

Código Javascript:

$(document).ready(function(){
 
   $(".facebook img").mouseover(function(){
           $(this).attr('src', 'images/socialicons/facebook-red.png');
   }).mouseout(function(){
            $(this).attr('src', 'images/socialicons/facebook.png');
   });
 
});
 

Pero gracias me has dado una solución mas simple y menos complicado que es lo que buscaba

[moro666]

Hombre, ami no me gusta mucho el lenguaje en javascript y sus librerias, es dificil y no es agradable, asi que intento buscar alternativas siempre que puedo!