<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星级评分-CSS实现方式</title>
<style>
#rating-1,#rating-2,#rating-3,#rating-4,#rating-5{
display: none;
}
#rating-1:target,#rating-2:target,#rating-3:target,#rating-4:target,
#rating-5:target {
display:block;
position: absolute;
left:0;
top:0;
}
.wrap{
position:relative;
width:160px;
height:32px;
margin:100px auto;
}
.rating{
position:relative;/*因为里面的星星需要绝对定位所以父容器需要相对定位*/
width:160px;
height:32px;
background:url(img/a.jpg) no-repeat;
}
.rating-1{
background-position: 0 -32px;
}
.rating-2{
background-position: 0 -64px;
}
.rating-3{
background-position: 0 -96px;
}
.rating-4{
background-position: 0 -128px;
}
.rating-5{
background-position: 0 -160px;
}
.rating-item{
position:absolute;
top:0;
z-index:3;
width:32px;
height:32px;
}
.rating-item-1{
left:0px;
}
.rating-item-2{
left:32px;
}
.rating-item-3{
left:64px;
}
.rating-item-4{
left:96px;
}
.rating-item-5{
left:128px;
}
.rating-item:hover{
left:0px;
z-index:2;
width:160px;
background:url(img/a.jpg) no-repeat;
}
.rating-item-1:hover{
background-position: 0 -32px;
}
.rating-item-2:hover{
background-position: 0 -64px;
}
.rating-item-3:hover{
background-position: 0 -96px;
}
.rating-item-4:hover{
background-position: 0 -128px;
}
.rating-item-5:hover{
background-position: 0 -160px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="rating">
<a href="#rating-1" class="rating-item rating-item-1" title="很不好"></a>
<a href="#rating-2" class="rating-item rating-item-2" title="不好"></a>
<a href="#rating-3" class="rating-item rating-item-3" title="一般"></a>
<a href="#rating-4" class="rating-item rating-item-4" title="好"></a>
<a href="#rating-5" class="rating-item rating-item-5" title="很好"></a>
</div>
<div class="rating rating-1" id="rating-1">
<a href="#rating-1" class="rating-item rating-item-1" title="很不好"></a>
<a href="#rating-2" class="rating-item rating-item-2" title="不好"></a>
<a href="#rating-3" class="rating-item rating-item-3" title="一般"></a>
<a href="#rating-4" class="rating-item rating-item-4" title="好"></a>
<a href="#rating-5" class="rating-item rating-item-5" title="很好"></a>
</div>
<div class="rating rating-2" id="rating-2">
<a href="#rating-1" class="rating-item rating-item-1" title="很不好"></a>
<a href="#rating-2" class="rating-item rating-item-2" title="不好"></a>
<a href="#rating-3" class="rating-item rating-item-3" title="一般"></a>
<a href="#rating-4" class="rating-item rating-item-4" title="好"></a>
<a href="#rating-5" class="rating-item rating-item-5" title="很好"></a>
</div>
<div class="rating rating-3" id="rating-3">
<a href="#rating-1" class="rating-item rating-item-1" title="很不好"></a>
<a href="#rating-2" class="rating-item rating-item-2" title="不好"></a>
<a href="#rating-3" class="rating-item rating-item-3" title="一般"></a>
<a href="#rating-4" class="rating-item rating-item-4" title="好"></a>
<a href="#rating-5" class="rating-item rating-item-5" title="很好"></a>
</div>
<div class="rating rating-4" id="rating-4">
<a href="#rating-1" class="rating-item rating-item-1" title="很不好"></a>
<a href="#rating-2" class="rating-item rating-item-2" title="不好"></a>
<a href="#rating-3" class="rating-item rating-item-3" title="一般"></a>
<a href="#rating-4" class="rating-item rating-item-4" title="好"></a>
<a href="#rating-5" class="rating-item rating-item-5" title="很好"></a>
</div>
<div class="rating rating-5" id="rating-5">
<a href="#rating-1" class="rating-item rating-item-1" title="很不好"></a>
<a href="#rating-2" class="rating-item rating-item-2" title="不好"></a>
<a href="#rating-3" class="rating-item rating-item-3" title="一般"></a>
<a href="#rating-4" class="rating-item rating-item-4" title="好"></a>
<a href="#rating-5" class="rating-item rating-item-5" title="很好"></a>
</div>
</div>
</body>
</html>
这代码看着花