本方案就是采用纯CSS实现人工选择评级时，能动态的显示出选择状态，并且支持链接。
效果演示：http://www.rexsong.com/blog/attachme...s_selector.htm
结构代码简单的不能再简单：
HTML 代码:
<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>
所有CSS技巧都应用在了这张20*40PX的图片上：
定义基本容器，宽度刚好够平铺5个图片，高度只显示图片上半部分未选中状态：
HTML 代码:
.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;}
定义每个单元，及触发显示图片下半部分选中状态，注意要采用绝对定位方法：
HTML 代码:
.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;}
最后就是分别定义每个单元格的偏移量，和链接触发可控制宽度：
HTML 代码:
.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环境下测试成功
