jQuery removeClass except on current id

[ Live Demo ]

I have a navigation menu that displays a开发者_如何学C certain state when hovered and also displays text in a different div.

In the event that the user does not interact with the menu, the divs auto cycle on their own and the navigation menu displays the corresponding hover state as if the user were interacting.

However, as it is cycling, if the user hovers over another link on the navigation menu, I need to removeClass on the previously highlighted element.

How do I write, "if id is not currently hovered id, then removeClass('hoverBold') on all other navigation links"

Look at jQuery not().

Something like...

$('.myMenu').hover(function() {
    $('.myMenu').not(this).removeClass('hoverBold');
});

Just add this to hoverIn:

links.removeClass('hoverBold');

You don't need to take the class off the other elements, because the current element, a:hover.sliderLinks, shares styling with hoverBold

Working example: http://www.jsfiddle.net/MXSkj/1/

Something like this?...

$('#nav li').mouseover(function(){
 //remove from others
 $('#nav li').removeClass('hoverBold');
 //add to this 
 $(this).addClass('hoverBold')
});

one way to do this would be to remove the hoverBold class on all links and add the it on the current link.

$(".sliderLinks").hover(function(){
   $(".sliderLinks").removeClass("hoverBold");
   $(this).addClass("hoverBold");
},function(){
   //..resume the automatic behaviour 
});

Other would be to use the .is() method inside the function passed to $(".sliderLinks").each() to see if its current element

Look at .filter

$(".myMenu").click(function() {
    // store current object
    var that = this;
    $(".myMenu").filter(function() {
        // check object in list is not current object
        return this != that;
    }).removeClass("hoverBold");

});

Basically you pass a filtering function and every object is tested. If the filter returns false (i.e. this == that) then the object is removed from the list.