&nbs p;
一、星星点灯，照亮我的家门
大家都喜欢听故事。
每篇文章也都是有故事的。
今天的故事是与星星相关的。
没错，讲的是星星点灯的故事——
才怪！
标题只是我脑子突然蹦出来的，唉，这首老到掉渣子的歌我居然条件反射般想起，可见——我老了！
故事其实是这样的~~
在天气还未如此炎热的某天，@waylybaye微博上展示了其使用 canvas 绘制星星图片，然后再保存为 png 格式使用的折腾：
很赞，对不对！
然，故事刚刚开始，
而后我随便吐槽了句：
这种效果两个星星就可以完全 CSS 实现了，包括IE6浏览器，多少多余劳动力浪费了啊~~
一石激起三层浪：
@H_ 360 _8@
有人对两颗星星实现星星评分效果感兴趣；
有人 觉得 纯CSS搞不定记住之前用户所选星星。
实际上，两颗星星（见下图）完全可以实现兼容IE6在内的效果；而且，纯CSS可是可以记住当前星星点击个数哦！
哈哈，我们的故事就此展开……
二、小星星，亮晶晶，点点像你的 眼睛
正片之前先来个精彩预告，您可以狠狠地点击这里：两颗星星实现的星星点击评分效果demo
哈哈，这回不上截图了，上截视频，更直观，截自Ch rom e浏览器，纯CSS实现。对了，貌似忘记把《爱情公寓》 电 视关掉，有杂音，嘻嘻……
iPad党若看不到上视频，可以点击下面区域查看截图：
出现吧，图片君！
document.getElementById(" img load").onclick = function() { this.inner HTML = ' '; };
您可能会惊讶地发现，诶，怎么点击的星星可以记住啊，纯CSS？鑫哥你确定不是在忽悠？
我不姓赵哦~
慢慢来，先看看两个星星如何实现兼容IE6浏览器的hover交互效果。
三、一闪一闪亮晶晶 满天都是小星星
两个星星 实现原理 见下图:
图1 图2
以上就是使用两个星星+纯CSS实现 hover 效果的原理。
5个小星星使用 a 标签，则可兼容IE6浏览器。
HT ML 结构如下：
<div class="star_bg"> <a class="star star_1"></a> <a class="star star_2"></a> <a class="star star_3"></a> <a class="star star_4"></a> <a class="star star_5"></a> </div>
CSS示意如下：
/* 灰色背景星星5个平铺 */ .star_bg { width: 120px; h ei ght: 20px; background: url(star.png) re PE at-x; pos IT ion: relative; overflow: hidden; } /* 这是5个小星星们的默认状态的定位 */ .star { height: 100%; width: 24px; line-height: 6em; position: absolute; z -i ndex: 3; } .star_1 { left: 0; } .star_2 { left: 24px; } .star_3 { left: 48px; } .star_4 { left: 72px; } .star_5 { left: 96px; } /* 鼠标hover效果实现，分别显示背景与定宽 */ .star:hover { background: url(star.png) repeat-x 0 -20px; left: 0; z-index: 2; } .star_1:hover { width: 24px; } .star_2:hover { width: 48px; } .star_3:hover { width: 72px; } .star_4:hover { width: 96px; } .star_5:hover { width: 120px; } 两颗星星 hover 事故讲完了，那如何记住星星点击的故事呢？
四、城市里 小星星 稀疏的 亮晶晶
去年年初曾介绍过“CSS radio/checkbox单复选框元素显隐技 术 ”，又称“checkbox hack技术”。
利用 label for 与单复选框等之间的点击关联特性，结果 :checked 伪 类选择器 以及兄弟选择器实现我们想要的交互效果——例如，元素的显示与隐藏， 或者 是选中的星星个数标记。
有些迷糊？不急，来个最 简单 示例，跟我一步一步来：
一个单选框，以及一个对应的 label 标签，如下：
<input type="radio" id=" test Radio"><label for="testRadio">观光团</label>点击含“观光团”字样的 label 标签，只要不是奇葩设备，单选框都会被选中的（因为 for 值等于单选框 id 值）； 于是，触发了如下 伪类 ：
input:checked {} CSS3中还有兄弟选择器，如 ~ 以及相邻兄弟选择器 + ，于是，我们可以 改变 label 标签的状态，例如，文字变红：
input:checked + label { color: red ; } 如果我们把 label 做成星星背景，岂不是我们点击这个星星，触发 radio 选中，就可以让这个label标签一直显示星星背景？
input:checked + label { background: url(star.png) repeat-x 0 -20px; } 以上就是实现的基本原理。
OK，下面来看看demo页面是如何处理的。
因为要兼顾IE6浏览器(hover效果)，因此，采用的是 a 标签内嵌 label 标签的形式。如果您不考虑IE6浏览器，墙裂推荐直接一个 label 标签。于是，就有类似下面的HTML结构（第一颗星星示意）：
<input type="radio" id="starScore1" class="score score_1" value="1" n am e="score"> <a hr ef=" # starScore1" class="star star_1" title="差"><label for="starScore1">差</label></a>
a 标签负责 hover 效果， label 标签负责点击效果。 我们需要隐藏单选框，且为可用性隐藏。我是使用 clip 实现的：
{ position: absolute; clip: rect(0 0 0 0); } 伪类与兄弟选择器控制星星在对应单选框选中中的状态，其实与 hover 的CSS类似：
.score:checked + .star { background: url(star.png) repeat-x 0 -20px; left: 0; z-index: 1; } .score_1:checked ~ .star_1 { width: 24px; } .score_2:checked ~ .star_2 { width: 48px; } .score_3:checked ~ .star_3 { width: 72px; } .score_4:checked ~ .star_4 { width: 96px; } .score_5:checked ~ .star_5 { width: 120px; } 于是，我们就实现了点击记住星星个数的效果了！ 但，直接这样是有问题的，见下图示意：
例如，点击第三颗星星，自然星星三颗呈现。此时，鼠标hover第2颗星星，理应显示两颗星星，但由于下面三颗星星占道了，因此，实际上显示了是3颗星星，问题出现。
问题其实不难解决。
我们只要让鼠标hover星星容器时候，所有背景都没有；经过星星时候，背景出现就可以了。
.star_bg:hover .star { background-image: none; } /* 经过父级容器，星星背景图去除 */ 父级背景隐藏权 重要 小于经过星星显示权重，因此，我使用了 !important （您也可以使用其他方法 提高 选择器权重），如下：
.star:hover { background: url(star.png) repeat-x 0 -20px !important ; } 于是，星星背景固定影响 hover 问题理论上解决了。 //zxx: IE6上面两段CSS都不认识，因此， hover 状态需要借助JS解决，具体参见demo 源 代码。 最后一 个技 术点， z-index 设置。根据上面的分析，星星总共有3种权重状态，因此，相应的，也存在3种层级状态：
1. 默认状态的星星层级最高，以便随时实现 hover 效果，demo中其 z-index 值为 3 ;
2. 正在被 hover 的星星需要比点击固定显示星星层级高。众所周知，如果z-index值相同，后面的绝对定位元素会覆盖前面的。这种情况下，如果第3颗点击选中，鼠标经过第2颗星星，就会出现 hover 死循环——星星2被星星3覆盖→星星2进入非 hover 状态（较高层级，覆盖星星3）→触发星星2 hover 态（被星星3覆盖）→星星2进入非 hover 状态）→触发星星2 hover 态→……
因此，需要设置， hover 状态 z-index:2 ; 选中态 z-index: 1 . 完整示意如下：
.star { z-index: 3; } .star:hover { z-index: 2; } :checked + .star { z-index: 1; } over ag ai n! 五、看那星星多么美丽，摘下一颗有局限性
这里的纯CSS实现实际是CSS3技术的应用，因此，局限就是兼容性。IE9+浏览器以及移动端都能不错实现。至于IE6~IE8浏览器，则……
实际上，IE7,IE8等浏览器点击星星，单选框也是选中的。对于这些浏览器，我们可能需要额外 一点 JS以及部分CSS的配合，实现我们需要的效果。具体实现可参见demo源代码，低版本IE浏览器JS代码直接可见。非重点，不展示。
现在的我越来越有一种感觉，或者说需求，是不是网站可以根据浏览器自动加载不同的JS文件呢？
比方说，IE6~IE8加载老版本 jQuery ，IE9+加载新 jq uery。或者这里的，IE6-8单独加载一个处理包，或者称为兼容包，类似软件兼容 补丁 一样的东西。
a与label嵌套之特性
a 标签里面嵌套 label 标签，点击后会有何反应呢？
据测试，如果 label block 水平，同时 for 关联控件元素， a 标签打酱油；否则，会触发 a 标签的相关行为。
demo中，为了IE6的 hover 效果， label 是 inline 水平。貌似 label 标签酱油，因此，交互是通过 a 标签+JS实现的。
六、就向流星许个心愿，让你 知道 这里是结语
从语义上将，实际上，星星评分就是个单选框。因此，实际开发 制作 的时候，建议保留单选框组，增强可访问性。因此，从这点上讲，本文所展示的CSS驱动星星评分交互的方法是很有 价值 的。
如果只想实现简单，5颗星星一排，共5排的背景图片是最好的选择。除了背景图大一点，其他其实都还好，可以说是一个更适合大众的实际的方法。注意，此方法也需要保留单选框组，否则仅仅一个表象实现，实则 质量 不高。
本文方法好处在于，纯CSS驱动，省了不少JS；同时 图片背景 比较小。但是，学习以及理解 成本 稍高，可能并不适用于所有同行，因此，标题前缀为“折腾”二字。还有，本文方法可能在一些低端的And ROI d pad上有些问题， 不过 我表示对此不屑一顾。
故事到此结束，谢谢品鉴！
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-折腾：2颗星星+纯CSS实现星星评分交互效果 全部内容，希望文章能够帮你解决 html5教程-折腾：2颗星星+纯CSS实现星星评分交互效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-折腾：2颗星星+纯CSS实现星星评分交互效果的详细内容...