CODEWITHSUNDEEP
jqueryjquery-events
webwrks
webwrks

Reputation: 11918

Simple Mouseover Function in jQuery

I have the following HTML:

img class="hoverContact"
img class="hoverContact"
img class="hoverContact"

And the following jQuery:

function highlightContact(ev) {
    $(this).addClass('lightblue');  
}

$('.hoverContact').mouseover(function(){
    highlightContact();
});

Any suggestions?

Upvotes: 0

Views: 102

Answers (2)

Hielo
Hielo

Reputation: 371

use the apply() method so that this within your highlightContrast() function refers to the relevant img tag.

function highlightContact(ev) {
    $(this).addClass('lightblue');  
}

$('.hoverContact').mouseover(function(){
    highlightContact.apply(this);
});

Alternatively, if you don't need that ev at all - if all you are doing is adding that class, you can get rid of the function highlightContact(){...} completely and simply use:

$('.hoverContact').mouseover(function(){
    $(this).addClass('lightblue');
});

Upvotes: 2

Thomas Shields
Thomas Shields

Reputation: 8942

You're trying to use this inside highlightContact when the function has no context. Also, the function takes a paramater ev but you're not passing it in. Instead, pass this in from the mouseover function and reference ev instead of this in the highlightContact function: 

function highlightContact(ev) {
        $(ev).addClass('lightblue');  
    }

    $('.hoverContact').mouseover(function(){
        highlightContact(this);
    });

Upvotes: 1

Related Questions