为什么有时候会出现点击不灵敏
来源：1-3 记住点击选中后的状态
暮女神
2017-07-31 12:11
<!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>有的要点击好几次才有效?
写回答
关注
2回答
-
- ImmortalBird
- 2017-08-06 09:04:22
同样的问题，chrome下是这样的。不是代码问题。你可以用overflow: hidden，那个就没问题。
-
- Zz皓
- 2018-06-04 14:15:24
确实有这个问题，一开始以为是相关容器的长度与宽度太小导致的，后来经过测试并不是这样，也是有点懵逼
星级评分原理和实现（下）
本课程主要讲解如何使用不同的方式来实现星级评分的效果。
12756 学习 · 23 问题
相似问题