css|动态|显示 本文创意来自，使用偏移替换背景图已经不是新鲜用法，不过能把技巧和应用结合的如此完美倒很少见。

本方案就是采用纯实现人工选择评级时，能动态的显示出选择状态，并且支持链接。

Demo

结构代码简单的不能再简单：
<ul class="star">
  <li><a href="#" title="Rate this 1 star out of 5" class="one-star"> </a></li>
  <li><a href="#" title="Rate this 2 stars out of 5" class="two-stars"> </a></li>
  <li><a href="#" title="Rate this 3 stars out of 5" class="three-stars"> </a></li>
  <li><a href="#" title="Rate this 4 stars out of 5" class="four-stars"> </a></li>
  <li><a href="#" title="Rate this 5 stars out of 5" class="five-stars"> </a></li>
</ul>
所有技巧都应用在了这张20*40PX的图片上：


定义基本容器，宽度刚好够平铺5个图片，高度只显示图片上半部分未选中状态：
.star { list-style:none; position:relative; margin:0; padding:0; width:100px; height:20px;
background:url(13_010531_star_rating.gif) top left repeat-x;}
定义每个单元，及触发显示图片下半部分选中状态，注意要采用绝对定位方法：
.star li a { display:block; width:20px; height:20px; z-index:2; position:absolute; padding:0;}
.star li a:hover { background:url(13_010531_star_rating.gif) bottom left; z-index:1; left:0;}
最后就是分别定义每个单元格的偏移量，和链接触发可控制宽度：
.star a.one-star { left:0;}
  .star a.one-star:hover { width:20px;}
.star a.two-stars { left:20px;}
  .star a.two-stars:hover { width:40px;}
.star a.three-stars { left:40px;}
  .star a.three-stars:hover { width:60px;}
.star a.four-stars { left:60px;}  
  .star a.four-stars:hover { width:80px;}
.star a.five-stars { left:80px;}
  .star a.five-stars:hover { width:100px;}
IE6.0和FF1.5环境下测试成功