I thought this would be pretty simple.... Basically, it's a 5-star rating system. When a user clicks, for example, three stars... I want to freeze those three stars right where they're at. I've been trying to simply remove the hover for the a href so it stays what it was at... maybe that's not the right method. I've exhausted absolutely everything I can think of... By the way this is straight javascript, not jquery or anything. It's crazy, I know but all of the JS was written straight....

I've got this class:

.star-rating li a{
    display:block;
    width:25px;
    height: 25px;
    text-decoration: none;
    text-indent: -9000px;
    z-index: 20;
    position: absolute;
    padding: 0px;
}
.star-rating li a:hover{
    background: url(images/alt_star.png) left bottom;
    z-index: 2;
    left: 0px;
}
.star-rating a:focus,
.star-rating a:active{
    border:0;   
    -moz-outline-style: none;
            outline: none; 
}
.star-rating a.one-star{
    left: 0px;
}
.star-rating a.one-star:hover{
    width:25px;
}

and this code:

<ul class='star-rating'>
<li><a href="#" onclick="javascript: vote(<?=$id;?>, 1); disableStars(); return false;" 
           title='1 star out of 5' id="1s" class='one-star'>1</a></li>