jQuery toggleClass() bug

[gilgimech]

I jusy found this wierd bug with toggleClass().

here's the code I'm working with

html

<div id="contentContainer" class="contentContainer">
     <div id="contentContainerHeader" class="containerHeader001"></div>
</div>

css

#contentContainer{
	width:190px;
	min-height:200px;
	margin-top:10px;
}
#contentContainerHeader{
	width:190px;
	height:30px;
	background-repeat:no-repeat;
}
.contentContainerHeader001{
	width:190px;
	height:30px;
	background-image:url(../images/header-001.png);
	background-repeat:no-repeat;
}
.containerContainerHeader002{
	width:190px;
	height:30px;
	background-image:url(../images/header-002.png);
	background-repeat:no-repeat;
}

jQuery

$(document).ready(function() {
     $('.contentContainer').hover(over, out);
    function over(event) {
     $(this).children('.contentContainerHeader001').toggleClass('contentContainerHeader002');
    }
    function out(event) {
     $(this).children('.contentContainerHeader002').toggleClass('contentContainerHeader002');
	}
});

Now, it seems that the position of the "contentContainerHeader001" and "contentContainerHeader002" matter on the css file.

Everything works the way it is, but if I switch the css araound like this. With "contentContainerHeader002" before "contentContainerHeader001"...

.containerContainerHeader002{
	width:190px;
	height:30px;
	background-image:url(../images/header-002.png);
	background-repeat:no-repeat;
}
.contentContainerHeader001{
	width:190px;
	height:30px;
	background-image:url(../images/header-001.png);
	background-repeat:no-repeat;
}

It no longer works.

I couldn't find any documentation about the css position mattering.

Could someone explain why this is happening?

[devnull69]

Is this difference intentional?

"contentContainerHeader002" before "contentContainerHeader001"

.containerHeader002{
...
}
.contentContainerHeader001{
...
}

There is no contentContainerHeader002 in CSS, but there is in jQuery ... can you validate this?

[gilgimech]

Sorry, that was just a typo. I actually use content specific names. I just wrote up generic for the examples. They should both be contentContainerHeader001 and contentContainerHeader002.I will edit it.

[devnull69]

It's still looking weird but I think I managed to identify the problem:

When toggling the class "contentContainerHeader002" for an element with class "contentContainerHeader001" you will have the following classNames for the element

1. "contentContainerHeader001"
2. "contentContainerHeader001 contentContainerHeader002"

In the second case the order of CSS entries counts. If the declaration of class "contentContainerHeader001" preceeds the declaration of class "contentContainerHeader002", you will see the background-image change on hover (second entry wins). If "contentContainerHeader002" preceeds "contentContainerHeader001" you will see no change (second entry wins, which is the unchanged background-image this time).

[gilgimech]

Originally Posted by devnull69

When toggling the class "contentContainerHeader002" for an element with class "contentContainerHeader001" you will have the following classNames for the element

1. "contentContainerHeader001"
2. "contentContainerHeader001 contentContainerHeader002"

In the second case the order of CSS entries counts. If the declaration of class "contentContainerHeader001" preceeds the declaration of class "contentContainerHeader002", you will see the background-image change on hover (second entry wins). If "contentContainerHeader002" preceeds "contentContainerHeader001" you will see no change (second entry wins, which is the unchanged background-image this time).

OK, that makes sense. So I guess, removeClass() and addClass() would be a better choice then? Then you wouldn't run into that issue with the css placement.

Then why does it seem like most people prefer toggle to add/remove? Toggle seems to be very limited in that perspective.

It's still looking weird but I think I managed to identify the problem:

Sorry bout that. I just hacked up the code and css from what I was using to get an example out. I should have just copied it.

[devnull69]

People prefer toggle to switch on/off certain element states because it is easy to use. But you should make sure you don't have two conflicting class names.

Two CSS definitions conflict if they have the same specificity. The specificity is defined by the number and "cardinality" of selectors involved.

http://www.smashingmagazine.com/2007...u-should-know/

So usually you declare an "active" class and you just toggle on/off this class. The normal behaviour of the element should then be specified using a selector with a lower specificity