<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>星级评分——第四种方法</title>
<style type="text/css" media="screen">
.rating{
width: 150px;
height: 30px;
background: url(images/rating4/rating.png) repeat-x;
margin: 150px auto;
position: relative;
}
.rating:hover .rating-item{
background: none;
}
.rating-item{
width: 30px;
height: 30px;
z-index: 3;
position: absolute;
top: 0;
}
.rating-item-1{
left: 0;
}
.rating-item-2{
left: 30px;
}
.rating-item-3{
left: 60px;
}
.rating-item-4{
left: 90px;
}
.rating-item-5{
left: 120px;
}
.rating-item:hover{
background:url(images/rating4/rating.png) repeat-x 0 -30px!important;
left: 0;
z-index: 2;
}
.rating input{
display: none;
}
input:checked + .rating-item{
background:url(images/rating4/rating.png) repeat-x 0 -30px;
left: 0;
z-index: 1;
}
.rating-item-1:hover,input:checked + .rating-item-1{
width:30px;
}
.rating-item-2:hover,input:checked + .rating-item-2{
width: 60px;
}
.rating-item-3:hover,input:checked + .rating-item-3{
width:90px;
}
.rating-item-4:hover,input:checked + .rating-item-4{
width: 120px;
}
.rating-item-5:hover,input:checked + .rating-item-5{
width: 150px;
}
.rating-item label{
width: 100%;
height: 100%;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<div class="rating">
<input type="radio" name="rating" id="rating-1" value="1" />
<a href="javascript:;" class="rating-item rating-item-1" title="很不好"><label for="rating-1"></label></a>
<input type="radio" name="rating" id="rating-2" value="1" />
<a href="javascript:;" class="rating-item rating-item-2" title="不好"><label for="rating-2"></label></a>
<input type="radio" name="rating" id="rating-3" value="1" />
<a href="javascript:;" class="rating-item rating-item-3" title="一般"><label for="rating-3"></label></a>
<input type="radio" name="rating" id="rating-4" value="1" />
<a href="javascript:;" class="rating-item rating-item-4" title="好"><label for="rating-4"></label></a>
<input type="radio" name="rating" id="rating-5" value="1" />
<a href="javascript:;" class="rating-item rating-item-5" title="很好"><label for="rating-5"></label></a>
</div>
</body>
</html>
.rating-item:hover{
background:url(images/rating4/rating.png) repeat-x 0 -30px!important;
left: 0;
z-index: 2;
}
我也是，我觉得是这里 .rating-item:hover移动到了已经把第三可改为z-index:2了，而选中的那颗在z-index:1
我的也可以