jQuery adding and removing classes on Anchor

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
    });
 });
13.10.2009 16:16:56
If i copy and paste the code in a test page and uncomment the commented parts, and remove the //works line, it works as expected. So the problem is not with your code.
Jan Willem B 13.10.2009 16:23:15
I would guess you have other CSS rules that override .menuText / .menuTextA
Greg 13.10.2009 16:29:57
Isn't using .each(...) redundant? Can't you just apply the mouseover behavior definition directly to the resulting jQuery collection of your initial selector? Not that this should make any difference, but it's just something that could be cleaned up and possibly eliminate the problem.
Peter 13.10.2009 16:48:11
@Peter good call, i just changed that. Thanks for the tip. @Greg thats exactly what the problem was!
Gabe 13.10.2009 17:16:54
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;
}
0
15.10.2009 13:51:14

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

.menuText:hover{
    text-decoration: none;
    color: #1A4588;
}
1
13.10.2009 18:04:42