JQuery добавление и удаление классов на Anchor

Question

Я не могу понять, почему я не могу удалить класс из, а затем добавить новый. Я могу изменить его CSS, используя .css (...), но использование .removeClass и .addClass, похоже, не работает.

Я использую add и remove class на некоторых пролетах, и это прекрасно работает. Кто-нибудь знает, что я делаю не так? Большое спасибо!

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>

КСС

.menuText{

    text-decoration: none;
    color: red;

}

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

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

почему бы вам просто не использовать CSS-псевдо-селектор?

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

Answer 2

Как насчет быстрого исправления:

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

Но для лучшего исправления (сценарий не требуется):

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

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