Can't seem to make jQuery .not work here

I've been using serialScroll's onBefore function to highlight the current scrolled selection in a navigation list, though I also want the navigation to highlight if it is hovered over. This works, except when the mouse leaves the area. Then all styles are stripped from it.

I tried adding a class to the current nav item, and using .not to make sure the highlighted nav item doesn't get its style stripped, though this isn't working.

Code is as below:

onBefore: function(){
            $('#selector ul li').eq($counter).find('a').css({color: '#d5d5d6'});

            if($counter == 3){
                $counter = 0;   
            } else {
                $counter++;
            }

            if($counter == 0){
                $('#selector ul li').eq($counter).find('a').css({color: '#666666'}).addClass('highlighted');
            }
            if($counter == 1){
                $('#selector ul li').eq($counter).find('a').css({color: '#55b447'}).addClass('highlighted');
            }
            if($counter == 2){
   开发者_开发百科             $('#selector ul li').eq($counter).find('a').css({color: '#2685c7'}).addClass('highlighted');
            }
            if($counter == 3){
                $('#selector ul li').eq($counter).find('a').css({color: '#f6db0a'}).addClass('highlighted');
            }

        }

});




    });

    // Hover Selector links to respective color

    $('#selector ul li').eq(0).not('.highlighted').find('a').hover(
        function(){
        $(this).css({color: '#666666'});
    },
        function() {
        $(this).css({color: '#d5d5d6'});
        }
    );

    $('#selector ul li').eq(1).not('.highlighted').find('a').hover(
        function(){
        $(this).css({color: '#55b447'});
    },
        function() {
        $(this).css({color: '#d5d5d6'});
        }
    );

    $('#selector ul li').eq(2).not('.highlighted').find('a').hover(
        function(){
        $(this).css({color: '#2685c7'});
    },
        function() {
        $(this).css({color: '#d5d5d6'});
        }
    );

    $('#selector ul li').eq(3).not('.highlighted').find('a').hover(
        function(){
        $(this).css({color: '#f6db0a'});
    },
        function() {
        $(this).css({color: '#d5d5d6'});
        }
    );

Be careful, since .not returns a JQuery object and not a boolean, pair the .not with a .length to get the expected result. Or use .hasClass for clearer logic.