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

No, you'll need to do it in two calls. But for added jQuery points, you can chain them:

$('#main').on('mouseenter', '#img', function() {
   $('#img').attr('src', 'http://www.example.com/new-img.jpg');
}).on('mouseleave', '#img', function() {
   $('#img').attr('src', 'http://www.example.com/old-img.jpg');
});

And as Benjamin comments below, you can optimise further (you get plain old Javascript points this time):

$('#main').on('mouseenter', '#img', function() {
   this.src = 'http://www.example.com/new-img.jpg';
}).on('mouseleave', '#img', function() {
   this.src = 'http://www.example.com/old-img.jpg';
});