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开发者_如何学Python 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;
}
Add a .navlist a:visited
declaration between .navlist a
and .navlist a:hover
that sets the text color to #c4c4c4.
精彩评论