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');
});

However, I'm loading the content in via Ajax so normally I would use:

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

But I'm reading that on('hover', ...) was deprecated in jQuery 1.8 and removed in 1.9 (jQuery Docs), which is what I'm currently using. Do anyone have any work arounds other than using:

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

$('#main').on('mouseleave', '#img', function() {
   $('#img').attr('src', 'http://www.example.com/old-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';
});

Answer 2

You can apply multiple events and then check event.type like this:

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

jsFiddle

You can also use switch-case or if/else:

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

Answer 3

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

Instead of using an <img> 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)