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

There's load of ways of doing this. One of the simplest is to have the two states in the same image and then just changing the background position on hover. This way there's no extra wait for the hover image to load as its already there.

    facebook
    twitter
    linkedin
    Wordpress               

CSS

#main-social a {
    width:  50px;
    height: 50px;
    display: inline-block;
    text-indent:-1000px;
    overflow:hidden;
    background-position: left top;
}
#main-social a.fb {
    background-image: url('fb.png');
}
#main-social a.tw {
    background-image: url('tw.png');
}
#main-social a.li {
    background-image: url('li.png');
}
#main-social a.wp {
    background-image: url('wp.png');
}
#main-social a:hover, #main-social a.active {
    background-position: left bottom!important;
}

Demo JSFiddle