mouseover "stjerne"-rating

Kode 

<span class='rate'>
<span class="current-rating" style="width:42px;"> </span>
<span><a onClick="return stemmer(2);" href="#" title="1 of 5" class='1'>1</a></span>
<span><a onClick="return stemmer(4);" href="#" title="2 of 5" class='2'>2</a></span>
<span><a onClick="return stemmer(6);" href="#" title="3 of 5" class='3'>3</a></span>
<span><a onClick="return stemmer(8);" href="#" title="4 of 5" class='4'>4</a></span>
<span><a onClick="return stemmer(10);" href="#" title="5 of 5" class='5'>5</a></span>
</span>
<br><br>
<span class='rate' title="Current rate: 3.75">
<span class="current-rating" style="width:52.5px;"> </span>
</span>

Kode 

.rate{
	list-style:none;
	margin: 0px;
	padding:0px;
	width: 70px;
	height: 16px;
	position: relative;
	background: url(../gfx/rates.gif) top left repeat-x;		
}
.rate span{
	padding:0px;
	margin:0px;
		
	/*\\*/
	float: left;
	/* */
}
.rate span a{
	display:block;
	width:14px;
	height: 16px;
	line-height:18px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
	overflow:hidden;
}
.rate span a:hover{
	background: url(../gfx/rates.gif) left center;
	z-index: 2;
	left: 0px;
	border:none;
}
.rate a.1{
	left: 0px;
}
.rate a.1:hover{
	width:14px;
}
.rate a.2{
	left:14px;
}
.rate a.2:hover{
	width: 28px;
}
.rate a.3{
	left: 28px;
}
.rate a.3:hover{
	width: 42px;
}
.rate a.4{
	left: 42px;
}	
.rate a.4:hover{
	width: 56px;
}
.rate a.5{
	left: 56px;
}
.rate a.5:hover{
	width: 70px;
}
.rate span.current-rating{
	background: url(../gfx/rates.gif) left bottom;
	position: absolute;
	height: 14px;
	display: block;
	text-indent: -9000px;
	z-index: 1;
}