来源：http://www.rexsong.com/blog/article.asp?id=223 创意：http://komodomedia.com/ =================================== 本文创意来自Komodo Media，使用偏移替换背景图已经不是新鲜用法，不过能把技巧和应用结合的如此完美倒很少见。 本方案就是采用纯CSS实现人工选择评级时，能动态的显示出选择状态，并且支持链接。 效果演示：http://www.rexsong.com/blog/attachments/200601/13_011003_ratings_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环境下测试成功 Referrence: Creating a Star Rater using CSS http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
上面的示例，在实际应用的时候有一些问题，那就是初始的等级无法显示。 一叶千鸟 已经更新了演示，但是在实用性方面还有点欠缺，我个人参考 Blinklist 的效果，将其作了进一步完善。 我的演示：http://www.purewhite.cn/demo/rating/rate1.html 注意在初始等级大于零和等于零的情况下的不同。 实际应用中，我们点击对应的“星”，通过 XMLHTTP 将数据发送到服务器端处理，并将新的等级发回，通过脚本动态修改星级的显示内容。程序还要进一步扩展和调整。