jQuery adding and removing classes on Anchor

Question

I can't figure out why I cant remove a class from a then add a new one. I can change its css using .css(...) but using .removeClass and .addClass dont seem to work.

I am using add and remove class on some spans and that works just fine. Anyone know what i am doing wrong? Thanks so much!

the html

<ul id="menu">
  <li><span>&nbsp;</span><span><a href="#">Home</a></span></li>
  <li><span>&nbsp;</span><span><a href="#">Test</a></span></li>
  <li><span>&nbsp;</span><span><a href="#">Test</a></span></li>
  <li><span>&nbsp;</span><span><a href="#">LaLa</a></span></li>
  <li><span>&nbsp;</span><span><a href="#">Test</a></span></li>
  <li><span>&nbsp;</span><span><a href="#">Blah</a></span></li>
 </ul>

the css

.menuText{

    text-decoration: none;
    color: red;

}

.menuTextA{
    text-decoration: none;
    color: #1A4588;
}

the jquery

$('li', 'ul#menu').each(function() {

                $(this).mouseover(function() {

                    $('span', this).eq(0).removeClass('menuTabLeft'); // works
                    $('span', this).eq(1).removeClass('menuTabRight'); // works

                    $('span', this).eq(0).addClass('menuTabLeftA'); // works
                    $('span', this).eq(1).addClass('menuTabRightA'); // works

                    //$('a', this).eq(0).removeClass('menuText'); // doesnt work 
                    //$('a', this).eq(0).addClass('menuTextA'); // doesnt work

                    $('a', this).eq(0).css('color', '#1A4588'); // works
    });
 });

Answer 1

why don't you just use the CSS psuedo-selector?

.menuText:hover{
    text-decoration: none;
    color: #1A4588;
}

Answer 2

How about this for a quick fix:

$("#menu li").each(function() {
 $(this).mouseover(function() {
  var elems = $("span", this);
  $(elems[0]).removeClass("menuTabLeft").addClass("menuTabLeftA");
  $(elems[1]).removeClass("menuTabRight").addClass("menuTabRightA");
  $('a', this).removeClass("menuText").addClass("menuTextA");
 });
});

But for a better fix (no script needed):

#menu a {
    text-decoration: none;
    color: red;
     font-size: 30px;
}

#menu a:hover{
    text-decoration: none;
    color: #1A4588;
     font-size: 60px;
}