只能定位一次怎么辦，并不像老師那樣點(diǎn)擊第幾顆就定位第幾顆，感覺代碼也沒什么問題呀
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星級評分-CSS實(shí)現(xiàn)方式</title>
<style>
? ?#rating-1,#rating-2,#rating-3,#rating-4,#rating-5{
? ? display: none;
? ?}
? ?#rating-1:target,#rating-2:target,#rating-3:target,#rating-4:target,
? ?#rating-5:target {
? ? display:block;
? ? position: absolute;
? ? left:0;
? ? top:0;
? ?}
? ?.wrap{
? ? position:relative;
? ? width:160px;
? ? height:32px;
? ? margin:100px auto;
? ?}
? ?.rating{
? ? position:relative;/*因?yàn)槔锩娴男切切枰^對定位所以父容器需要相對定位*/
? ? width:160px;
? ? height:32px;
? ? background:url(img/a.jpg) no-repeat; ?? ?
? ?}
? ?.rating-1{
? ? background-position: 0 -32px;
? ?}
? ?.rating-2{
? ? background-position: 0 -64px;
? ?}
? ?.rating-3{
? ? background-position: 0 -96px;
? ?}
? ?.rating-4{
? ? background-position: 0 -128px;
? ?}
? ?.rating-5{
? ? background-position: 0 -160px;
? ?}
? ?.rating-item{
? ? position:absolute;
? ? top:0;
? ? z-index:3;
? ? width:32px;
? ? height:32px;
? ?}
? ?.rating-item-1{
? ? left:0px;
? ?}
? ?.rating-item-2{
? ? left:32px;
? ?}
? ?.rating-item-3{
? ? left:64px;
? ?}
? ?.rating-item-4{
? ? left:96px;
? ?}
? ?.rating-item-5{
? ? left:128px;
? ?}
? ?.rating-item:hover{
? ? left:0px;
? ? z-index:2;
? ? width:160px;
? ? background:url(img/a.jpg) no-repeat;
? ?}
? ?.rating-item-1:hover{
? ? background-position: 0 -32px;
? ?
? ?}
? ?.rating-item-2:hover{
? ? background-position: 0 -64px;
? ?}
? ?.rating-item-3:hover{
? ? background-position: 0 -96px;
? ?}
? ?.rating-item-4:hover{
? ? background-position: 0 -128px;
? ?}
? ?.rating-item-5:hover{
? ? background-position: 0 -160px;
? ?}
</style>
</head>
<body>
?<div class="wrap">
? <div class="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 class="rating rating-1" id="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 class="rating rating-2" id="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 class="rating rating-3" id="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 class="rating rating-4" id="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 class="rating rating-5" id="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>
2020-04-05
這代碼看著花