jQuery Class change not updating until mouse over

Question

I have a menu and each menu item is a span with a class set in css:

.newClass {color: red}

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

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

When another menuItem is click I change the classes back on 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 mouse over the menu Item. So the menu item color stays red until I mouse it and then it changes back to black with a blue hover.

See Gaby's example in the comments for what should be happening

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

A possible problem could be the way you remove the selection from the current menu item..

you should not use this if you are doing it from inside the click, because this would point to the clicked element, and not the previously current one.. if that is the case then you should use $('.newClass').removeClass('newClass').addClass('oldClass');

see some code that works at http://www.jsfiddle.net/khGRW/

Update

I see now.. you are using Cufon, which replaces the text with images or canvas elements..

This make it unresponsive to normal DOM changes.

You need to call the Cufon.refresh('#content') after changing the class to an element (that is not currently under hover event) to force it to repaint the menu according to the current state of the DOM.

The hover effect is taken care automatically because they support that option, but that is where the DOM monitoring ends from the Cufon side..

Answer 2

try this approach:

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

1. when click on a menu item, make all menu items to ordinary class
2. make the clicked menu to the highlight class