问答详情
源自:1-3 记住点击选中后的状态

为什么有时候会出现点击不灵敏

<!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>

有的要点击好几次才有效?

提问者:暮女神 2017-07-31 12:11

个回答

  • ImmortalBird
    2017-08-06 09:04:22
    已采纳

    同样的问题,chrome下是这样的。不是代码问题。你可以用overflow: hidden,那个就没问题。

  • Zz皓
    2018-06-04 14:15:24

    确实有这个问题,一开始以为是相关容器的长度与宽度太小导致的,后来经过测试并不是这样,也是有点懵逼