为什么有时候会出现点击不灵敏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星级评分--第二种实现</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
.wrap{
position: relative;
width:500px;
height:91px;
margin:200px auto;
overflow:hidden;
}
.rating{
position:relative;
width:500px;
height:91px;
background: url(images/star.png) no-repeat 0 -2px;
}
.rating-item{
position:absolute;
z-index:3;
width:100px;
height:91px;
}
.rating-item-1{
left:0;
}
.rating-item-2{
left:100px;
}
.rating-item-3{
left:200px;
}
.rating-item-4{
left:300px;
}
.rating-item-5{
left:400px;
}
.rating-item:hover{
left:0;
z-index: 2;
width: 500px;
background: url(images/star.png) no-repeat;
}
.rating-item-1:hover{
background-position: 0 -93px;
}
.rating-item-2:hover{
background-position: 0 -184px;
}
.rating-item-3:hover{
background-position: 0 -275px;
}
.rating-item-4:hover{
background-position: 0 -366px;
}
.rating-item-5:hover{
background-position: 0 -457px;
}
.rating-1{
background-position: 0 -93px;
}
.rating-2{
background-position: 0 -184px;
}
.rating-3{
background-position: 0 -275px;
}
.rating-4{
background-position: 0 -366px;
}
.rating-5{
background-position: 0 -457px;
}
</style>
</head>
<body>
<div>
<div id="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 id="rating-1" class="rating 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 id="rating-2" class="rating 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 id="rating-3" class="rating 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 id="rating-4" class="rating 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 id="rating-5" class="rating 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>有的要点击好几次才有效?
