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

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颗星的显示了。这是一个不错的技巧。

技术要点：

1. 利用a标签的hover来进行状态的改变
2. 利用css的background-position来进行不同背景的改变
3. 利用css的定位来实现位置的固定
4. 最重要的：z-index，来进行层次的固定，从a1的hover切换到a2的hover，就得靠这个。

实现流程：

1. 准备结构清晰的html代码：

1 <ul class="rating nostar">
2    <li class="one"><a title="1 Star" href="#">1</a></li>
3    <li class="two"><a title="2 Stars" href="#">2</a></li>
4    <li class="three"><a title="3 Stars" href="#">3</a></li>
5    <li class="four"><a title="4 Stars" href="#">4</a></li>
6    <li class="five"><a title="5 Stars" href="#">5</a></li>
7 </ul>

2. 接下来，我们实现显示分值状态,即待打分状态和已打分状态，我们统称为分值状态，那么分值状态我们怎么实现呢？ 其实很简单，只要改变<ul>的背景就能实现，事先要准备这样一张图片背景图片，这张图片就代表了6种不同的状态，分别是0分（待打分），1分、2分、3分、4分、5分，6种状态，6个对应的class：.nostar,.onestar,.twostar,.threestar,.fourstar,.fivestar，
3. 接下来我们实现交互，就是hover状态，基于各浏览器兼容情况考虑，我们选择支持最好的a:hover，即每个交互元素应该是a元素，要触发不同的a:hover，我们就要排布a的位置，这里可以用定位来实现，每颗星width=16px来计算的话，我们可以得到如下的css：
   现在，位置已经排好了，鼠标就能随时的触发hover了，下一步就要实现a：hover的效果。

1 ul.rating li.one a {left:0}
2 ul.rating li.two a {left:16px;}
3 ul.rating li.three a {left:32px;}
4 ul.rating li.four a {left:48px;}
5 ul.rating li.five a {left:64px;}
6 ul.rating li a {
7        position:absolute;left:0;top:0;width:16px;height:16px;text-decoration:none;z-index: 200;
8  }

4. 我们也要像第二步一样，要准备几张不同的状态背景图，即：，第一个a对应1分，第二个a对应2分，以此类推，第5个a对应5分，但是有个要点是值得注意的，a:hover时width设置为5颗星的宽度，而且z-index必须比a的z-index低，例如：a{z-index:20;}，a:hover{z-index:10}，只要这样才能轻易的在不同a之间切换，如果a:hover的z-index高于a的z-index，那么鼠标移动到a上 ，我们永远切换不到另一个a上，因为另外4个a被当前a所覆盖了，这一点是这个效果最核心的技巧。
5. 对于背景图片来说，我们最好整合到一张图片里，最终的背景是：

好了，这个效果到这里就算完成了，里边用到的技巧都是很灵活的，让你有一种茅塞顿开的感觉，有木有~~，比如a:hover从平时的改变颜色，加个下划线，到这里就变成了改变left,改变width这样的位置属性，这大大拓展了我们的思路，不得不说外国人的创新意识真的比国人强。

DEMO: http://classjs.com/demo/star/star.html