您的位置：首页 > Web前端 > CSS

前端小技巧（二）：评分效果css版

2017-12-22 15:56 155 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:205px;
height:42px;
position: relative;
}
label{
width:42px;
float: right;
height: 42px;
margin-left: -1px;
}
label span{
width:40px;
height: 40px;
border:1px solid #0b4b5a;
display: inline-block;
position: relative;
z-index: 2;
}
label:hover dfn{
display: block;
z-index:1;
}
label input{
display: none;
}
label input:checked~dfn{
display: block;
}

label dfn{
width:100px;
height: 42px;
line-height:42px;
text-align: center;
position: absolute;
background: #f00283;
display: none;
top:0;
right: -110px;
font-style: normal;
}
label em{
height:40px;
position: absolute;
left:0;
top:1px;
}
label:hover em{
z-index: 1;
}
.item5:hover em,.item5 input:checked~em{
width: 40px;
background: #f00;
}
.item4:hover em,.item4 input:checked~em{
width: 81px;
background:#ffa800;
}
.item3:hover em,.item3 input:checked~em{
width: 122px;
background: #e1e400;
}
.item2:hover em,.item2 input:checked~em{
width: 163px;
background: #ace400;
}
.item1:hover em,.item1 input:checked~em{
width: 204px;
background: #00e400;
}
</style>
</head>
<body>

<div class="box">
<label class="item1">
<input type="radio" name="grid">
<span></span>
<dfn>非常好</dfn>
<em></em>
</label>
<label class="item2">
<input type="radio" name="grid">
<span></span>
<dfn>很好</dfn>
<em></em>
</label>
<label class="item3">
<input type="radio" name="grid">
<span></span>
<dfn>一般</dfn>
<em></em>
</label>
<label class="item4">
<input type="radio" name="grid">
<span></span>
<dfn>较差</dfn>
<em></em>
</label>
<label class="item5">
<input type="radio" name="grid">
<span></span>
<dfn>很差</dfn>
<em></em>
</label>
</div>

</body>
</html>

这是JS入门的一个小效果，相信大家也都见过，不必多说。

其实用到的技巧也不多，主要就是“+”、“~”这两个比较骚的选择器再配合单选按钮的checked伪类

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端 css

相关文章推荐

新的分享

章节导航