前言
这种星星评价效果，相信大家这个并不陌生，经常会遇到这个。现在如果要我们自己实现一个，很多人第一反应可能用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
<div class="star_evaluate"> <a class="star star_1" href="javascript:;" title="一星"></a> <a class="star star_2" href="javascript:;" title="两星"></a> <a class="star star_3" href="javascript:;" title="三星"></a> <a class="star star_4" href="javascript:;" title="四星"></a> <a class="star star_5" href="javascript:;" title="五星"></a> </div>
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
<form id="score_form"> <div class="star_evaluate"> <input type="radio" id="scoreId_1" class="score score_1" name="score" value="1"/> <label for="scoreId_1" class="star star_1"></label> <input type="radio" id="scoreId_2" class="score score_2" name="score" value="2"/> <label for="scoreId_2" class="star star_2"></label> <input type="radio" id="scoreId_3" class="score score_3" name="score" value="3"/> <label for="scoreId_3" class="star star_3"></label> <input type="radio" id="scoreId_4" class="score score_4" name="score" value="4"/> <label for="scoreId_4" class="star star_4"></label> <input type="radio" id="scoreId_5" class="score score_5" name="score" value="5"/> <label for="scoreId_5" class="star star_5"></label> </div> </form>
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;
}原文链接:https://segmentfault.com/a/1190000009755574
随时随地看视频
