【JS】星级评分原理和实现（ 下集第1章 第三种实现方式 ）
• 1-1 原理分析--点亮鼠标滑过的星星 (04:53)
• 1-2 代码实现--点亮鼠标滑过的星星 (08:21)
• 1-3 记住点击选中后的状态 (12:18)
笔记:
下集第1章 第三种实现方式
1.思路：不用js，只用css实现。hover改变有层次
1.思路：不适用javascript，只用css的hover实现。
本节重点是层级z-index的使用。
原理简单来说是通过一张雪碧图，每个a一hover到就扩展到整个父容器将背景图片通过移动雪碧图的显示区域实现；注意是由于有5个a需要切换，所以实际上激动后其由默认最高级放在最上面z-index:3降为z-index:2，这样其他几个a标签就可以继续使用。
图片参考位置: //www.imooc.com/qadetail/224667
css代码部分：
html结构：
第一种：锚点+target伪类
说明：使用href触发target伪类对应的代码部分
思路：先隐藏点击后触发target伪类显示在浮动下方
需求改变为覆盖原图进行覆盖，因此用到定位。
对整体用div包裹，对更大的wrap进行位置限制，然后对target后事件进行绝对定位，确保都显示在wrap的可视区域里正好覆盖。
效果是当点击后，对应div直接覆盖在原上，相当于记录显示。可重复点击。
第二种方法：用锚点（将对应id移到可视区域）
思路:适用于IE6及以上的浏览器版本，且非常方便，对最外层设置溢出隐藏overflow:hidden.
设置前是雪碧图，设置后仅出现父容器的可视区域。
由于锚点的特性，当点击锚点时会找到相应的id元素，将它出现在可视区，也就是将原来的挤出去可视区范围。不需要设置hidden等。
代码：
不需要设计第一种方法的id和target伪类。
分析纯CSS实现：如果要拓展半颗或多一颗就需要全部图片进行修改（不方便修改和维护），无法将评分提交出去（其实可以用表单提交），且较难想到，拓展上纯CSS不如结合js。