CODEWITHSUNDEEP
jquery
bharal
bharal

Reputation: 16214

jQuery - hover function with two classes for an element, a hover for each class

I'm not sure if this is a different problem embedded somewhere in my code, or an issue with the hover function i'm not aware of -

in short, i have an element with two classes

<input type="image" class="classA classB" ... />

and i have jQuery code like so:

$('classA').hover(){
    function1,
    function2
}

$('classB').hover(){
    function3,
    function4
}

what i'm wanting is that when you hover over the input, BOTH hover functions (function1, function3) get fired. And when you move off it, BOTH functions (function2, function4) are also fired. What appears to be happening is that the classB hover completely overrides or shadows or what have you the classA hover function.

Is this intended behaviour (or is this an indication that something is wrong with my much-larger code base?), and if so, what is the general consensus work around?

Upvotes: 0

Views: 421

Answers (2)

bharal
bharal

Reputation: 16214

AH-HA!

Ok, so sp00m's answer here were good and right - but it wasn't quite for my purpose. Because i have a fair bit of code running around, I was hoping to keep things "clean" (cleanish?). I probably should have been clearer in the original question...

See, I already had elements that needed the first hover, and elements that needed the second, so when i had elements that needed both the aim was to not have a third hover for that scenario. Code non-reuse and complexity! Boo!

What I didn't realise was that the hover that comes last will overwrite the first hover. This is probably something to do with the fact that it was targeting one class, and the first was targeting another.

The solution was this: 

$('.classB, .classA').hover(){
    function3,
    function4
}

Happily, when i target classA using the multi selector it doesn't override the original hover.

That is, I removed classB from the class attribute for my input, and added classA to the hover selector!

Upvotes: 0

sp00m
sp00m

Reputation: 48837

The classB's hover overwrites the classA's hover in the case of a tag that has both classes, because of the order they are written in (classB's hover after classA's hover).

A solution could be:

$('.classA, .classB').hover(
// mouseover
function() {
    var $this = $(this);
    if($this.hasClass('classA')) {
        function1();
    }
    if($this.hasClass('classB')) {
        function3();
    }

},
// mouseout
function() {
    var $this = $(this);
    if($this.hasClass('classA')) {
        function2();
    }
    if($this.hasClass('classB')) {
        function4();
    }
});

Upvotes: 3

Related Questions