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

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