【发布时间】：2019-10-09 07:07:32
【问题描述】：
我创建了一个课程列表。每节课旁边都有十颗星来评价这节课。一切都很好，但似乎 css 是错误的。例如，当我点击星星为第三行的课程评分时，css 将悬停在第一行。
我通过这样的单选按钮创建列表评级。 我的看法
<tbody>
@foreach($rates as $rate)
<form method="post" action="{{url('/rating')}}">
<input type="hidden" name="rateId" value="{{$rate->id}}">
{{ csrf_field() }}
<tr style="display: flex;">
<td style="width:100px;"></td>
<td style="text-align: left; width:400px;"><a href="{{url('/bai-giang/'.$rate->id)}}">{{$rate->title}}</a></td>
<td style="text-align: center; width:200px;"></td>
<td style="width:300px;">
<div align="center" style="display: inline-flex;">
<fieldset class="rating">
<input type="radio" id="star10" name="rating" value="10" /><label for="star10" title="Rocks!">10 stars</label>
<input type="radio" id="star9" name="rating" value="9" /><label for="star9" title="Rocks!">9 stars</label>
<input type="radio" id="star8" name="rating" value="8" /><label for="star8" title="Rocks!">8 stars</label>
<input type="radio" id="star7" name="rating" value="7" /><label for="star7" title="Rocks!">7 stars</label>
<input type="radio" id="star6" name="rating" value="6" /><label for="star6" title="Rocks!">6 stars</label>
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Rocks!">4 stars</label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Rocks!">3 stars</label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Rocks!">2 stars</label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Rocks!">1 stars</label>
</fieldset>
</div>
</td>
<th style="width:100px;">
<button type="submit" class="btn btn-link" onclick="return confirmAction()"> Đánh giá</button>
</th>
</tr>
</form>
@endforeach
</tbody>
单选按钮的 CSS
.rating {
float:left;
}
.rating:not(:checked) > input {
position: absolute;
/* top: -9999px; */
clip: rect(0, 0, 0, 0);
height: 0;
width: 0;
overflow: hidden;
opacity: 0;
}
.rating:not(:checked) > label {
float:right;
width:1em;
padding:0 .1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:200%;
line-height:1.2;
color:#ddd;
text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}
.rating:not(:checked) > label:before {
content: '★ ';
}
.rating > input:checked ~ label {
color: #f70;
text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: gold;
text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: #ea0;
text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}
.rating > label:active {
position:relative;
top:2px;
left:2px;
}
我的结果：当我点击第三行的星星时，它会像这样悬停在第一行
【问题讨论】：