CODEWITHSUNDEEP
jqueryjquery-hoverjquery-on
William Orazi
William Orazi

Reputation: 1714

jQuery on('hover') Event Replacement

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

Upvotes: 5

Views: 6164

Answers (3)

Shaddow
Shaddow

Reputation: 3215

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

Upvotes: 9

lonesomeday
lonesomeday

Reputation: 238075

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

Upvotes: 10

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276596

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)

Upvotes: 1

Related Questions