CSS实现星状评分效果 – CSS Star Rating

有一个场景，相信大家不会感到陌生，那就是我们购物之后对商家、物流、商品等进行评价，其中有一个直观的交互就是星状打分，这种交互方式增强了用户对商品评价的直观感受，更贴近用户的行为习惯，这是一种非常棒的设计。

从技术的角度来说，利用html+css就能完全搞定这种交互效果，好多童鞋都以为是js实现的呢，有木有~~~,哈哈。肯定有.
不得不说，这效果都是从墙外传过来的，我们玩的都是现成。~~~~~~

交互流程：

首先，我们来顺一下这个交互的流程~~~

1. 待打分状态，5个空心的五角星?
2. 鼠标滑过每颗星，显示分值预览效果，
3. 已打分状态，你打了3分，那显示的效果就是前三颗星呈打分状态?

实现思路：

1. 鼠标移动到第一颗星上即：a:hover，我们可以利用background-position来得到想要的效果，这个很简单
2. 鼠标移动到第二颗星，我们怎么让第一颗星也显示黄色的星星呢,鼠标移动到第3颗星，我们怎么让前三颗星都是黄色状态呢，这个问题得好好考虑，我们以第三颗星为例，鼠标移动到第三颗星，要让前两颗星都同时呈现黄色状态，除非我们把第三颗星的宽度加宽，宽到能覆盖前两颗星，然后利用第三颗星的黄色背景平铺来制造一个前两颗星都呈黄色的假象。
3. 还有一个问题是 我们怎么从第三颗星的hover状态顺利切换到第二颗星呢，这就需要z-index来实现，z-index能实现层次关系，只有把a全部置于最高层，a:hover置于次顶层，这样才能实现a:hover和a的随意切换。
4. 还有一个状态我们需要考虑，如果目前呈现的是4颗星，而我们在即将打2分，就是鼠标移到第二颗星上进行打分，那么第三颗星，和第四颗星都是呈现被打分状态，这样就总共出现了3种状态，给人的感觉就是不干净，感觉有点怪怪的，不过我们可以利用a:hover把第二颗星的宽带加宽到5颗星的宽度，这样第二颗星就能控制整个5颗星的显示了。这是一个不错的技巧。