From Facebook Developer Wiki

In case anyone else finds it useful, I banged my head against this one for awhile, and think this is a pretty elegant solution. You can see it here: http://apps.facebook.com/reading_list/ (add a toread entry and click the checkbox. look for the stars)

Here's the code:

 <span class='rating'>
   <span class=preamble>This book is worth</span>
   <span class='galaxy'>
     <?
     $hide_ids = array();
     for($j=0;$j<NUM_RATINGS;$j++) {
       $hide_ids[] = 'x'.$j;
     }
     for($j=NUM_RATINGS-1;$j>=0;$j--) {
       ?>
       <div class="starry_night star<?=$j?>" id="star<?=$hide_ids[$j]?>" style="display:none;"></div>
       <a href=# class="star rating<?=$j?>" clickthrough="true" clicktohide='star<?=implode(',star',$hide_ids)?>' clicktoshow='star<?=$hide_ids[$j]?>' >
         <input type=radio name=rating value=<?=$j?> />
         <span>
           <?=$ratings[$j]?>
         </span>
       </a>
     <?}?>
   </span>
 </span>

And the styles (where the magic happens):

 <style type="text/css">
 a.star {
   position:absolute;
   height:<?=STAR_SIZE?>px;
   padding:0px;
   overflow:hidden;
   z-index:2;
   background:url(<?=BASE_URL?>/images/t.gif) 0% 0% repeat;
 }   
 </style><style type="text/css">
 a.star:hover {
   overflow:visible;
   background:url(<?=BASE_URL?>/images/star_bright.png) 0% 0% repeat-x;
 }     
 a.star span {
   display:block;
   position:absolute;
   top:0px;
   margin-top:<?=STAR_SIZE?>px;
   white-space:nowrap;
 }
 a.star input {
   margin:0px;
   height:<?=STAR_SIZE?>px;
   width:<?=STAR_SIZE?>px;
   cursor:pointer;
   cursor:hand;
   float:right;
   opacity:0;
   -moz-opacity:0;
   -khtml-opacity:0;
   filter:alpha\(opacity\=0\);
 }
 </style><style type="text/css">
 span.galaxy {
   position:relative;
   float:left;
   width:<?=STAR_SIZE*NUM_RATINGS?>px;
   height:<?=STAR_SIZE?>px;
   background:url(<?=BASE_URL?>/images/star_dim.png) 0% 0% repeat-x;
 }
 </style><style type="text/css">
 span.galaxy div.starry_night {
   position:absolute;
   top:0px;
   height:<?=STAR_SIZE?>px;
   background:url(<?=BASE_URL?>/images/star_bright.png) 0% 0% repeat-x;
   margin:0px;
   padding:0px;
   z-index:0;
 }
 <? for($j=0;$j<NUM_RATINGS;$j++) { ?>
 div.star<?=$j?> {
   width:<?=STAR_SIZE*($j+1)?>px;
 }
 a.rating<?=$j?> {
   width:<?=STAR_SIZE*($j+1)?>px;
 }
 <? } ?>
 span.galaxy:hover div.starry_night {
   z-index:-1;
 }