纯CSS星级效果

CSS/*去除标签默认样式*/ul{margin:0;填充：0；list-style:none;}/*初始化风格*/.star_evaluate{position:relative;宽度：100px；高度：20px；背景:url("icon-star-default.png")repeat-x;背景大小：20px20px；溢出：隐藏；}.star{显示：块；高度：20px；宽度：20px；位置：绝对；z-index:2;}.??star_1{left:0;}.star_2{left:20px;}.star_3{left:40px;}.star_4{left:60px;}.star_5{left:80px;}/*鼠标悬停*/.star:hover{光标：指针;背景：你rl("icon-star-active.png")重复-x；背景大小：20px20px；左：0；z-index:1;}.star_1:hover{width:20px;}.star_2:hover{width:40px;}.star_3:hover{width:60px;}.star_4:hover{width:80px;}.star_5:hover{width:100px;}不断改进我们上面的星级评定效果已经初见成效，但是暴露了一个问题，就是我们的评价机制缺少记忆功能。接下来，让我们对其进行优化。材料和上面一样。实现原理这里我们主要依靠input[type=radio]单选按钮来实现星级记忆的功能，我们的星级主要分为三种状态。初始化状态：在初始化状态下，我们需要像上面那样初始化星星的位置。这里的区别是每颗星对应一个radiobutton和一个label，label的级别高于radiobutton。另外，我们使用标签的for属性来实现与单选按钮的连接。漂浮状态：在漂浮状态下，我们需要根据漂浮状态对应的star设置label标签的宽度，并将left属性设置为0，此时需要保证label的水平在浮动状态下低于其他标签。选中状态：在选中状态下，我们设置label标签的宽度为浮动状态。代码实现HTML