jQuery - Change image src on hover

Question

Basically I want to change the image src to add -active.png on hover.

So fb.png would become fb-active.png on hover, and fb.png when it\'s not hovering.

Answer 1

You could do this just in CSS if you don't need to be compliant with older browsers.

To do it in jquery, you can try something like this:

$(".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");
    });
});