I am somewhat new to jquery and I have a problem with something I am trying to implement using jquery.

I have a vertical navigation menu where each link animates on hover by changing color, increasing letter spacing, and adding a border on the left.

Everything is working the way I want it to except for when I click on the link. After I click on the link, the text changes to a different color and remains that same color even when I hover over the link.

I am wanting to make it to where the color change on hover remains intact even after I click the link. I'm sure I am missing something simple, but I have tried everything I know to do with no luck. Any suggestions would be helpful!

Here is what I have for the animation...

<script type="text/javascript">

$(document).ready(function(){
    $("ul.navlist li a").hover(function(){
        $(this).stop()
        .animate({paddingLeft: '10px',letterSpacing: '2px',borderWidth:'20px'},{queue:false,easing:'easeInQuad'},50)
    },
        function(){
        $(this).stop()
        .animate({paddingLeft: '0px', letterSpacing: '0px',borderWidth:'0px'},{queue:false,easing:'easeOutQuad'},50)
    });
});

</script>

My css for the navigation list is here...

.navlist { list-style: none; }

.navlist a { border-left-color: #555555; border-left-style: solid; border-left-width: 0px; color: #c4c4c4; }

.navlist a:hover { border-left-color: #555555; border-left-style: solid; color: #555555; }