jQuery change hover on color, then return back to original color

Question

I've got some buttons on a page whose color is changed via jQuery, illustrating which one's active. I'd like to add a color change ONLY when hovering, after which it's returned to the original color (which is dictated by jQuery) when left.

I first used css: .showlink li:hover {color:#aaa;} which works appropriately except for that when the pages are switched and jQuery changes the colors, it superceeds the CSS.

Then I decided to use simple jQuery that says when something's hovered on, change it's color. this doesn't completely work because it permanently changes the color. To mitigate this, I added in a bit to the function that returns it to a different color.

is there some way I can return it to the original color from before it was changed on hover?

// Changes color on hover
    $(function() {
        $('.showlink').hover(function(){
            $(this).css('color', '#aaa');
        },
        function(){
           $(this).css('color', '#f3f3f3');
        });
    });
//Changes color depending on which page is active, fades that page in
    $(function(){
        $('#show_one').css('color', '#ffcb06');
        $('#two, #three').hide();
    });

    $('.showlink').click(function(){
        $('.showlink').css('color', '#f3f3f3');
        $(this).css('color', '#ffcb06');
        var toShow = this.id.substr(5);
        $('div.page:visible').fadeOut(600, function(){
            $('#' + toShow).fadeIn(600);
        });
    });

Answer 1

.showlink li:hover {color:#aaa !important;}

will superceede everything else.