《折腾_2颗星星_纯CSS实现星星评分交互效果__张鑫旭》由会员分享，可在线阅读，更多相关《折腾_2颗星星_纯CSS实现星星评分交互效果__张鑫旭（10页珍藏版）》请在金锄头文库上搜索。
1、.word可编辑.折腾：2颗星星+纯CSS实现星星评分交互效果 张鑫旭 by zhangxinxu from http:/本文地址：http:/ 满天都是小星星两个星星实现原理见下图:图1 图2背景色就是灰色平铺；5个小标签，分别对应每个星星，宽度1/5，其垂直层次关系见图1示意;当鼠标经过某星星，例如上图所示第3个，宽度延伸，背景显示，hover效果即呈现；最后，仔细观察其他小星星的层次以及位置，不存在覆盖的情况，于是，hover其他小星星，效果同样存在；over!以上就是使用两个星星+纯CSS实现hover效果的原理。5个小星星使用a标签，则可兼容IE6浏览器。HTML结构如下：<d
2、iv 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; height: 20px; background: url(s
3、tar.png) repeat-x; position: relative; overflow: hidden;/* 这是5个小星星们的默认状态的定位 */.star height: 100%; width: 24px; line-height: 6em; position: absolute; z-index: 3;.star_1 left: 0; .star_2 left: 24px; .star_3 left: 48px; .star_4 left: 72px; .star_5 left: 96px; /* 鼠标hover效果实现，分别显示背景与定宽 */.star:hover back
4、ground: 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技术”
5、。利用label for与单复选框等之间的点击关联特性，结果:checked伪类选择器以及兄弟选择器实现我们想要的交互效果例如，元素的显示与隐藏，或者是选中的星星个数标记。有些迷糊？不急，来个最简单示例，跟我一步一步来：一个单选框，以及一个对应的label标签，如下：<input type=radio id=testRadio><label for=testRadio>观光团</label>点击含“观光团”字样的label标签，只要不是奇葩设备，单选框都会被选中的（因为for值等于单选框id值）；于是，触发了如下伪类：input:checked CSS3中还
6、有兄弟选择器，如以及相邻兄弟选择器+，于是，我们可以改变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浏览器，墙裂
7、推荐直接一个label标签。于是，就有类似下面的HTML结构（第一颗星星示意）：<input type=radio id=starScore1 class=score score_1 value=1 name=score><a href=#starScore1 class=star star_1 title=差><label for=starScore1>差</label></a>a标签负责hover效果，label标签负责点击效果。我们需要隐藏单选框，且为可用性隐藏。我是使用clip实现的： position: absolute;
8、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;
9、.score_5:checked .star_5 width: 120px; 于是，我们就实现了点击记住星星个数的效果了！但，直接这样是有问题的，见下图示意：例如，点击第三颗星星，自然星星三颗呈现。此时，鼠标hover第2颗星星，理应显示两颗星星，但由于下面三颗星星占道了，因此，实际上显示了是3颗星星，问题出现。问题其实不难解决。我们只要让鼠标hover星星容器时候，所有背景都没有；经过星星时候，背景出现就可以了。.star_bg:hover .star background-image: none; /* 经过父级容器，星星背景图去除 */父级背景隐藏权重要小于经过星星显示权重，因此，我使用
10、了!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的星星需要比点击固定显
11、示星星层级高。众所周知，如果z-index值相同，后面的绝对定位元素会覆盖前面的。这种情况下，如果第3颗点击选中，鼠标经过第2颗星星，就会出现hover死循环星星2被星星3覆盖星星2进入非hover状态（较高层级，覆盖星星3）触发星星2hover态（被星星3覆盖）星星2进入非hover状态）触发星星2hover态因此，需要设置，hover状态z-index:2; 选中态z-index: 1. 完整示意如下：.star z-index: 3; .star:hover z-index: 2; :checked + .star z-index: 1; over again!五、看那星星多么美丽，摘下
12、一颗有局限性这里的纯CSS实现实际是CSS3技术的应用，因此，局限就是兼容性。IE9+浏览器以及移动端都能不错实现。至于IE6IE8浏览器，则实际上，IE7,IE8等浏览器点击星星，单选框也是选中的。对于这些浏览器，我们可能需要额外一点JS以及部分CSS的配合，实现我们需要的效果。具体实现可参见demo源代码，低版本IE浏览器JS代码直接可见。非重点，不展示。现在的我越来越有一种感觉，或者说需求，是不是网站可以根据浏览器自动加载不同的JS文件呢？比方说，IE6IE8加载老版本jQuery，IE9+加载新jQuery。或者这里的，IE6-8单独加载一个处理包，或者称为兼容包，类似软件兼容补丁一样
13、的东西。a与label嵌套之特性a标签里面嵌套label标签，点击后会有何反应呢？据测试，如果label block水平，同时for关联控件元素，a标签打酱油；否则，会触发a标签的相关行为。demo中，为了IE6的hover效果，label是inline水平。貌似label标签酱油，因此，交互是通过a标签+JS实现的。六、就向流星许个心愿，让你知道这里是结语从语义上将，实际上，星星评分就是个单选框。因此，实际开发制作的时候，建议保留单选框组，增强可访问性。因此，从这点上讲，本文所展示的CSS驱动星星评分交互的方法是很有价值的。如果只想实现简单，5颗星星一排，共5排的背景图片是最好的选择。除了背景图大一点，其他其实都还好，可以说是一个更适合大众的实际的方法
