add & removeClass jQuery

Question

I have a simple 2 level menu, and the upper menu should get the class "selected" if the mouse is over, and the class should be removed when moving over another first-level menu item. But thats not the problem, that already works.

My problem is: the first-level menuitem should leave on "selected" until i go on another first-level menuitem. Up to now my script removes the class "selected" as soon as i leave my mouse from the item

<script type="text/javascript">
    $(document).ready(function(){
        $("#navi li").hover(function(){
            $(this).addClass('selected');
        },function(){
            $(this).removeClass('selected');
        });
    });
</script>

I want that all items with the class "selected" getting their class removed as soon as my mouse is on another item, but if the mouse is only on a submenu-item or whereever it could be on the page, the selected item should stay selected.

score 1 · Answer 1 · answered Apr 24 '12 at 13:34

1

Is this what you are after? You can remove all of the selected classes on hover and then add selected to the required element.

 $(document).ready(function(){
        $("#navi li").hover(function(){
            $("#navi li").removeClass('selected');
            $(this).addClass('selected');
        }
    });

answered Apr 24 '12 at 13:34

Ollie

646
4
13

yes, that was the first problem. thank you very much. the second problem is, i want to have the "selected" item be selected until the mouse goes on another item. but it should stay selected if i only scroll around the page. – user1353789 Apr 24 '12 at 13:36
Are you asking if the selected class can stay if you scroll down the page. This solution will do that:http://jsfiddle.net/ollie/8fFXM/ – Ollie Apr 24 '12 at 13:45
thank you, that was very helpful. changed it to "click" and now it's good. perfect would be, if the pre-selected item would fadeOut, and the clicked item would fade in, but i tried that and i guess i'd need the last item in a var, to save it for jQuery, am i right? – user1353789 Apr 24 '12 at 13:54
Unfortunately you wont be able to get jQuery to fade between background colours without a plugin. If cross browser issues aren't a problem you could animate background colors with CSS3. http://stackoverflow.com/questions/4411306/css3-transition-of-background-color – Ollie Apr 24 '12 at 13:57
ok. lets forget about that. if i want to have my submenu-items work with this script either, (which are not li's within "#navi") i have to add the second selector like $("#navi li, #subnavi a").hover(function...and so on, am i right? i tried this, but it doesn't stays on "selected" it just deletes the selected from the main-menu, but doesn't stays on the submenu-item... i just want that the selected item stays selected, even if the page loads new, is that possible? – user1353789 Apr 24 '12 at 13:59
The function above will remove the .selected class globally across the whole page. This will allow you to do it for mulitple lists http://jsfiddle.net/ollie/8fFXM/5/ – Ollie Apr 24 '12 at 14:03
OK got it you meant another list with a with separate id http://jsfiddle.net/ollie/8fFXM/5/ – Ollie Apr 24 '12 at 14:07
ok i guess it's not that easy to get them working if there are anchors in it, which links to a new menupoint, do i have to use PHP to get them selected after the page has loaded? – user1353789 Apr 24 '12 at 14:21
That would be the ideal way yes. – Ollie Apr 24 '12 at 14:29

score 0 · Answer 2 · answered Apr 24 '12 at 13:36

0

Try binding to the mousemove event:

$("ul").mousemove(function (e) {
    if (e.target.tagName == "LI") {
         $(".selected").removeClass("selected");
         $(e.target).addClass("selected");        
    }
});

Demo.

answered Apr 24 '12 at 13:36

karim79

339,989
67
413
406

score 0 · Answer 3 · answered Apr 24 '12 at 13:36

0

This Happens Because of the following lin:

},function(){
                $(this).removeClass('selected');
            });

Which means that the above callback gets executed when you move mouse out..

Instead do this:

 $(document).ready(function(){
            $("#navi li").hover(function(){
                $(this).addClass('selected');
            },function(){ });
        });

http://jsfiddle.net/SyvYv/

Refer http://api.jquery.com/hover/

answered Apr 24 '12 at 13:36

RohitWagh

1,999
3
22
43

the problem is, it should stay selected until i go on another item, not the whole time. best would be, if it only gets selected on click, and removed after another click on another item – user1353789 Apr 24 '12 at 13:45
So you can give the same for removing the class on click. instead of giving `.removeclass()` as second callback to hover function provide it to the hover/Click function of the element on hover of which you want the class to be removed.. – RohitWagh Apr 24 '12 at 13:48

add & removeClass jQuery

3 Answers3