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

Question

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?

no. The real code is a bit more complicated, I was mostly wondering if i had done a problem, or if that was hover's expected operation. Also if there was a simple way to, i dunno "join" hovers or something. — bharal
– bharal, Commented Oct 4, 2012 at 13:01

sp00m · Accepted Answer · 2012-10-04 12:42:11Z

3

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

edited Oct 4, 2012 at 12:42

answered Oct 4, 2012 at 11:57

sp00m

49k31 gold badges152 silver badges263 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ram Over a year ago

This code doesn't make sense. Both conditions valuate to true.

sp00m Over a year ago

@undefined Yeah, so both of the if will return true, and that's what the OP wanted, am I wrong?

Rune FS Over a year ago

as I read OP function1 and function3 should fire when you hover and function2 and function4 shoould fire when you move off. Yours will fire all functions on hover for those elements that have both classes want it?

bharal · Accepted Answer · 2012-10-04 13:19:31Z

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!

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related