【JS】星级评分原理和实现（ 下集第2章 第四种实现方式 ）
• 2-1 原理分析--点亮鼠标滑过的星星 (01:22)
• 2-2 代码实现--点亮鼠标滑过的星星 (05:56)
• 2-3 原理分析--记住点击选中后的状态 (02:22)
• 2-4 代码实现--记住点击选中后的状态 (11:46)
笔记：
下集第2章 第四种实现方式
思路：两颗星星
用表单提交评分
父类：背景repeat-x 横向移除？
hover html和css上类似
check伪类处理
1.html初步布局，类似第三种实现方式。
但图片采用两颗星星如下：
代码：
说明：css对父容器背景图设置repeat-x横向铺满，共同子星星的hover样式是显示出点击后的图片；对逐个子星星的样式设置图片宽度，因为也是repeat-x显示所以会覆盖到父容器背景图上。
2.根据原理设置html布局
对label样式设置与父级相同大小
display:inline-block;
/*inline-block主要的用处是用来处理行内非替换元素的高宽问题的！
行内非替换元素，比如span、a等标签，正常情况下士不能设置宽高的，加上该属性之后，就可以触发让这类标签表现得如块级元素一样，可以设置宽高。*/
3.此时点击后会触发相应的input:checked事件
用特性+ 可和其兄弟选择器一起设置事件
此时点击后能显示记录并且滑动该星星后面的可以滑动显示。
4.此时问题:点击后还可以再选择该颗前面的，但滑动到前面的就无法显示，也可以说是没有熄灭。那么，熄灭的思路是将移动到父容器的触摸事件改为清除背景图
第一是父容器的none和子元素的!important思路是当鼠标进入父容器，空格表示从属关系，其下面的所有星星都熄灭，rating-item对象清除已有的图片，比如点击了选中了第四颗，滑回去到第三颗时第四颗还是亮的，而设置后当鼠标进入父容器即rating:hover的.rating-item清除.rating-item的图片，然后重新执行.rating-item:hover把新图片放入。（老师说这是为了解决点了第三颗不能点第二颗的问题，而实际上这里效果是可以的，反而这里是解决了滑动能显示的问题）
注意最后不加也没问题那段，老师是为了解决滑动不能回显的问题，还要加上，但是我看代码如上面说是在容器内移动进父容器所有星星已熄灭，然后hover上.rating-item:hover就当即触发了对应的事件会显示。
5.美化效果
单选框绝对定位出去+对父容器溢出隐藏
6.设置表单，提交出去。并可以设置默认值checked=”checked”
代码：