title: jQuery Class change not updating until mouse over
body: <p>I have a menu and each menu item is a span with a class set in css:</p>
  
  <p><code>.newClass {color: red}</code></p>
  
  <p><code>.oldClass {color:black} oldClass:hover {color:blue;}</code>  </p>
  
  <p>When you click on a menu item the class is changed with:
  <code>$(this).removeClass('oldClass').addClass('newClass');</code>
  which works fine.  </p>
  
  <p>When another menuItem is click I change the classes back on the current menu item with:
  <code>$(this).removeClass('newClass').addClass('oldClass');</code></p>
  
  <p>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.</p>
  
  <p>See Gaby's example in the comments for what should be happening</p>
  
  <p>Here is my actual code:</p>
  
  <p><code>$('.headingRev').removeClass('headingRev').addClass('heading');<br>
  $(this).removeClass('heading').addClass('headingRev');</code></p>
  
  <p>and here is the css:</p>
  
  <p><code>.heading {color: #bb1f1a;}<br>
  .heading:hover {color: #e9b49e;text-decoration:none;}<br>
  .headingRev {color: #e9b49e;}</code></p>