前言

这种星星评价效果，相信大家这个并不陌生，经常会遇到这个。现在如果要我们自己实现一个，很多人第一反应可能用JS+CSS去实现它。这种方式并没有什么不好的地方，只是我们在复用的时候不是很方便，需要带上JS和CSS的两块代码。为了复用更简单，所以我们介绍一种纯CSS的方式。

小试牛刀

素材

原理

这里我们分为两层：

第一层：div.star_evaluate 设置图片背景icon-star-default.png，沿X轴平铺，超出部分隐藏，作为定位父级。第二层：a标签作为第二层，这里我们需要设置其定位属性，初始化设定好每个a标签的位置，以及其背景图片。这边需要注意的是一定要给a便签加上层级。

鼠标移动对应的星星时，将其left属性设置为0，然后设置其宽度，这个宽度由其对应的星级决定，最后别忘了设置其层级。

关于层级的设定，我们一定要保证div.star_evaluate<a:hover<a。

代码实现

HTML

CSS

/*去掉标签默认样式*/ul {    margin: 0;    padding: 0;    list-style: none;}/*初始化样式*/.star_evaluate {    position: relative;    width: 100px;    height: 20px;    background: url("icon-star-default.png") repeat-x;    background-size: 20px 20px;    overflow: hidden;}.star {    display: block;    height: 20px;    width: 20px;    position: absolute;    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 {    cursor: pointer;    background: url("icon-star-active.png") repeat-x;    background-size: 20px 20px;    left: 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]单选框,我们的星星评分主要分为三个状态。

初始化状态：在初始化状态下，我们需要跟上面一样初始化星星的位置。这里有点不一样的是每个星星对应一个单选框和一个label标签，label的层级要高于单选框。另外我们通过label的for的属性来实现和单选框的联系。悬浮状态：在悬浮状态下，我们要根据悬浮所对应的星星来设置label标签的宽度，left属性设置为0。此时我们要保证该悬浮状态下的label标签的层级低于其他label标签。选中状态：在选中状态下，我们跟悬浮状态一样设置label标签的宽度。

代码实现

HTML

CSS3

/*去掉标签默认样式*/        ul {            margin: 0;            padding: 0;            list-style: none;        }        input {            margin: 0;        }        /*初始化样式*/        .star_evaluate {            position: relative;            width: 100px;            height: 20px;            background: url("icon-star-default.png") repeat-x;            background-size: 20px 20px;            overflow: hidden;        }        .star,.score{            display: block;            height: 20px;            width: 20px;            position: absolute;        }        .star{            z-index: 2;        }        .score{            opacity: 0;        }        .star_1, .score_1 {            left: 0;        }        .star_2, .score_2 {            left: 20px;        }        .star_3, .score_3 {            left: 40px;        }        .star_4, .score_4 {            left: 60px;        }        .star_5, .score_5 {            left: 80px;        }        /*鼠标悬浮*/        .star:hover {            cursor: pointer;            background: url("icon-star-active.png") repeat-x;            background-size: 20px 20px;            left: 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;        }        /*选中之后*/        .score:checked + .star {            background: url("icon-star-active.png") repeat-x;            background-size: 20px 20px;            left: 0;        }        .score_1:checked + .star_1 {            width: 20px;        }        .score_2:checked + .star_2 {            width: 40px;        }        .score_3:checked + .star_3 {            width: 60px;        }        .score_4:checked + .star_4 {            width: 80px;        }        .score_5:checked + .star_5 {            width: 100px;        }