为什么选择的选框跟星星的位置不对应？
慕田峪3126352
2019-04-10 18:24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星级评分-第四种实现方式</title>
<style type="text/css">
.rating{
position: relative;
width: 160px;
height: 32px;
background: url(img/two.png) repeat-x;
margin: 100px auto;
overflow: hidden;
}
/*移入整个父容器的时候，会触发hover伪类，然后在这个状态下再去找到所有的a标签*/
.rating:hover .rating-item{
background-image: none;
}
/*滑入某一个星星的时候，将它点亮*/
.rating-item:hover{
background:url(img/two.png) repeat-x 0 -32px !important;
}
.rating-item{
position: absolute;/*一定要绝对定位*/
top: 0;
z-index: 3;
width: 32px;
height: 32px;
}
.rating-item-1{
left: 0;
}
.rating-item-2{
left: 32px;
}
.rating-item-3{
left: 64px;
}
.rating-item-4{
left: 96px;
}
.rating-item-5{
left: 128px;
}
.rating-item:hover{
left: 0;
z-index:2;
background: url(img/two.png) repeat-x 0 -32px;/*将图片上点亮的星星的那一帧在x轴上横铺*/
}
input:checked + .rating-item{
left: 0;
z-index: 1;
background: url(img/two.png) repeat-x 0 -32px;/*将图片上点亮的星星的那一帧在x轴上横铺*/
}
.rating-item-1:hover,#rating-1:checked + .rating-item{
width: 32px;/*点亮后，宽度改变*/
}
.rating-item-2:hover,#rating-2:checked + .rating-item{
width: 64px;
}
.rating-item-3:hover,#rating-3:checked + .rating-item{
width: 96px;
}
.rating-item-4:hover,#rating-4:checked + .rating-item{
width: 128px;
}
.rating-item-5:hover,#rating-5:checked + .rating-item{
width: 160px;
}
.rating-item label{
display: inline-block;
width: 100%;
height: 100%;
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="2"/>
<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="3"/>
<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="4"/>
<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="5"/>
<a href="javascript:;" class="rating-item rating-item-5" title="很好"><label for="rating-5"></label></a>
</div>
</body>
</html>
1回答
-
- 慕梦前来
- 2020-04-08 23:38:57
具体一点呀，位置是相对来说的，你的这个找相对的是哪一个？
星级评分原理和实现（下）
12756 学习 · 23 问题
相似问题