JQuery class change is not updated until the mouse

Question

I have a menu, and each menu item represents a range with a class set to css:

.newClass {color: red}

.oldClass {color:black} oldClass:hover {color:blue;}

When you click on a menu item, the class changes with: $(this).removeClass('oldClass').addClass('newClass'); which works great.

When I click on another menu item, I change the classes to the current menu item with: $(this).removeClass('newClass').addClass('oldClass');

The problem is when the class is changed back, the change is not reflected until I go through the menu item. Thus, the color of the menu item remains red until I click on it, and then it changes to black with a blue hover.

See Gaby example for comments on what should happen.

Here is my actual code:

$('.headingRev').removeClass('headingRev').addClass('heading');
$(this).removeClass('heading').addClass('headingRev');

and here is the css:

.heading {color: #bb1f1a;}
.heading:hover {color: #e9b49e;text-decoration:none;}
.headingRev {color: #e9b49e;}

Answer 1

.

this, , this , . , $('.newClass').removeClass('newClass').addClass('oldClass');

. , http://www.jsfiddle.net/khGRW/

.. Cufon, .

DOM.

Cufon.refresh('#content') ( hover), DOM.

hover , , DOM Cufon.

Answer 2

:

<ul>
<li class="ordinary">Menu 1</li>
<li class="ordinary">Menu 2</li>
<li class="ordinary">Menu 3</li>
</ul>

$('ul li').click(function(){
  $('ul li').removeClass("highlight").addClass("ordinary");
  $(this).removeClass("ordinary").addClass("highlight");
});

• ,