switchClass failing after jQuery hover function on jQuery cycle element

Question

I have a page using the jQuery cycle plugin for a sliding banner, and inside each slide is a div (#info) whose background colour is animated on hover.

I'm also trying to use switchClass to switch between three color-schemes on the page and this also changes the background colour of #info, which works great until the hover on #info fires, after which the switchClass buttons no longer work.

Here's the jQuery for the hover:

$('#info.default').hover(function(){
        $('#info.default').stop().animate({backgroundColor: '#CDBF21'}, 300);
        $('#info.default .description').stop().animate({color: '#444'}, 300);
    }, function() {
        $('#info.default').stop().animate({backgroundColor: '#203E52'}, 300);
        $('#info.default .description').stop().animate({color: '#fff'}, 300);
    });

And here are the switchClass parts:

$('.coral-green-button').click(function(){
        $('#info.default').stop().switchClass("default", "coral-green", 1000 );
        $('#info.green-blue').stop().switchClass("green-blue", "coral-green", 1000 ); 
    });

$('.green-blue-button').click(function(){
        $('#info.coral-green').stop().switchClass("coral-green", "green-blue", 1000 );
        $('#info.default').stop().switchClass("default", "green-blue", 1000);
    });

$('.mustard-blue-button').click(function(){
        $('#info.coral-green').stop().switchClass("coral-green", "default", 1000);
        $('#info.green-blue').stop().switchClass("green-blue", "default", 1000);
    });

Thanks!

can you make a jsfiddle.net replicating the issue you are having? — wirey00, Sep 24 '12 at 14:48
Where is it breaking? Sorry I'm not understanding what isn't happening — wirey00, Sep 24 '12 at 15:40
OK - I've updated it a bit: http://jsfiddle.net/Q6zsm/7/ - basically once the hover effect fires once, the switchClass no longer works — Sean Hawkridge, Sep 24 '12 at 15:44
Oh ok.. That helps alot now.. I didn't know exactly what the problem was.. I'll see what if I can find anything — wirey00, Sep 24 '12 at 15:48
It has something to do with level of precedence.. As you can see in the console. The hover is more specific as it's setting the background directly to a certain color. So when you try to change the class - it changes but the css change in the hover is more specific - thus causing it to stay the colors of the hover. — wirey00, Sep 24 '12 at 16:02
Read this post.. It will help you understand how css specificity works http://stackoverflow.com/a/667585/1385672 — wirey00, Sep 24 '12 at 16:11
Also your page has a BUNCH of dom elements that have the same ID.... which is BAD — O'Mutt, Sep 24 '12 at 19:25

O'Mutt · Accepted Answer · 2012-09-25T17:04:42.923

0

I know this isn't perfect but it is a step in the correct direction:

http://jsfiddle.net/Mutmatt/Q6zsm/19/

your element (on hover) is getting a new background that is a ELEMENT specific property therefor a class level background color CANNOT override that

Better:

http://jsfiddle.net/Mutmatt/Q6zsm/24/

Best:

http://jsfiddle.net/Mutmatt/Q6zsm/49/

Comments inline

edited Sep 25 '12 at 17:04

answered Sep 24 '12 at 19:33

O'Mutt

1,557
1
13
27

Hey, thanks! This is really helpful. Could you explain your comment about having lots of DOM elements with the same ID? Does each slide in the cycle need a unique ID? Thanks! – Sean Hawkridge Sep 25 '12 at 08:32
Your IDS need to be unique but you can add a class and call the class in jquery with a .className. I will modify the bottom jsfiddle for you with that comment... Don't forget to mark the answer correct if it is. – O'Mutt Sep 25 '12 at 15:36
On a note I didn't add a class to the info I just changed the selector to use an 'id starts with' selector – O'Mutt Sep 25 '12 at 17:13

switchClass failing after jQuery hover function on jQuery cycle element

1 Answers1