                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /星級(jí)評(píng)分原理和實(shí)現(xiàn)（下）

為什么有時(shí)候會(huì)出現(xiàn)點(diǎn)擊不靈敏

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>星級(jí)評(píng)分--第二種實(shí)現(xiàn)</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>

有的要點(diǎn)擊好幾次才有效?