Question

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

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;
}

Answer 1

Add a .navlist a:visited declaration between .navlist a and .navlist a:hover that sets the text color to #c4c4c4.