CODEWITHSUNDEEP
jqueryhover
SammyFM
SammyFM

Reputation: 51

Simple mouseover won´t work

I got a strange Problem:

I set up a h2 to be hovered and jQuery should check if the h2 has a class "main-active":

$('h2').hover(function (){

        if ($(this).not('.main-active')){$(this).css('color','white');}

        });

$('h2').mouseout(function (){$(this).css('color','black');});

Somehow it continues to hover the h2 with white, when it has the class "main-active" ???

Any idea?

Upvotes: 0

Views: 260

Answers (2)

Zathrus Writer
Zathrus Writer

Reputation: 4331

why are you using hover and then mouseout manually, when the hover function itself binds mouseover/mouseout events?

what's wrong with:

$('h2').hover(function() {
       var e = $(this);
       if (e.hasClass('main-active')){e.css('color','white');}
    }, function() {
       var e = $(this);
       if (e.hasClass('main-active')){e.css('color','black');}
    });
});

P.S.: it's a good idea to only use $() once on this and cache it into a variable, so jQuery won't need to parse the element into an object each time - like in the code above: var e = $(this)

Upvotes: 0

Fran Verona
Fran Verona

Reputation: 5476

Try this solution:

$('h2').hover(function (){

   if (!$(this).hasClass('main-active')){$(this).css('color','white');}

});

$('h2').mouseout(function (){$(this).css('color','black');});

Documentation: http://api.jquery.com/hasClass/

Upvotes: 1

Related Questions