jQuery – Cambiar imagen src al pasar el mouse

Si hallas alguna incompatibilidad con tu código o proyecto, recuerda probar siempre en un entorno de testing antes subir el código al proyecto final.

Solución:

Puede hacer esto solo en CSS si no necesita cumplir con los navegadores más antiguos.

Para hacerlo en jquery, puedes probar algo como esto:

$(".img-social").hover(function()
    $(this).attr("src", function(index, attr)
        return attr.replace(".png", "-active.png");
    );
, function()
    $(this).attr("src", function(index, attr)
        return attr.replace("-active.png", ".png");
    );
);

Esto se puede hacer sin javascript, solo con css. Me gusta esto:

Dar diferentes clases para iconos como fb para facebook,tw o twitter y así sucesivamente.

HTML:

CSS:

.img-socialdisplay:inline-block;height:20px;width:20px;
.fbbackground:url("images/fb.png");
.fb:hoverbackground:url("images/fb-active.png");
.twbackground:url("images/twitter.png");
.tw:hoverbackground:url("images/twitter-active.png");
.lnbackground:url("images/linkedin.png");
.ln:hoverbackground:url("images/linkedin-active.png");
.wpbackground:url("images/wordpress.png");
.wp:hoverbackground:url("images/wordpress-active.png");

Puedes usar sprite para la eficiencia.

Puede usar las funciones mouseenter, mouseleave.

valoraciones y reseñas

Tienes la opción de añadir valor a nuestra información colaborando tu experiencia en las interpretaciones.

---

---

Utiliza Nuestro Buscador