jQuery on('hover') Event Replacement

Question

I\'m looking to swap an img src on hover. Typically I would use:

$(\'#img\').hover(function() {
    $(this).attr(\'src\', \'http://www.example.com/new-img.jpg\'         


        

Answer 1

Here is an alternative approach that involves no JavaScript at all:

Instead of using an with a src attribute use a div, give that div the same id (remember to give it the right width and height).

In your css, give that div a background-image something like:

#img{ 
    background-image: url('http://www.example.com/old-img.jpg');
}

On :hover change it

#img:hover{ 
    background-image: url('http://www.example.com/new-img.jpg');
}

(fiddle)