недавно делал это и подумал, может кому пригодится:
демка
<div class="rate">
<div style="width:67%"></div>
<a href="#" title="1"> </a>
<a href="#" title="2"> </a>
<a href="#" title="3"> </a>
<a href="#" title="4"> </a>
<a href="#" title="5"> </a>
</div>.rate, .rate div, .rate a { background:url('rate.png') 0 0 repeat-x; }
.rate { width:100px; height:20px; position:relative; }
.rate div { height:20px; background-position:0 -40px; position:absolute; top:0; left:0; z-index:1; }
.rate a { float:left; width:20px; height:20px; text-decoration:none; background-position:0 20px; position:relative; z-index:2; }
.rate:hover a { background-position:0 -20px; }
.rate a:hover ~ a { background-position:0 0; }
