星级评定悬停独立的每个星级评分

Question

我有一个奇怪的问题，当我有一个星级评级的代码工作真的很好，但问题是当我添加另一个星级评级。第二个星级评分与第一个星级评分相关（我对第二个评分的每个改变都出现在第一个评分中）。我想知道如何解决这个错误，使每个星级独立
HTML代码

<fieldset class="rating"> 
    <legend>Please rate:</legend> 
    <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="Pretty good">4 stars</label> 
    <input type="radio" id="star3" name="rating" value="3" /> 
<label for="star3" title="Meh">3 stars</label> 
    <input type="radio" id="star2" name="rating" value="2" /> 
<label for="star2" title="Kinda bad">2 stars</label> 
    <input type="radio" id="star1" name="rating" value="1" /> 
<label for="star1" title="Sucks big time">1 star</label> 
</fieldset> 
<br> 
<br> 
<br> 
<fieldset class="rating"> 
    <legend>Please rate:</legend> 
    <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="Pretty good">4 stars</label> 
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label> 
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label> 
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label> 
</fieldset> 

CSS代码

.rating { 
    float:left; 
} 

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
    follow these rules. Every browser that supports :checked also supports :not(), so 
    it doesn’t make the test unnecessarily selective */ 
.rating:not(:checked) > input { 
    position:absolute; 
    top:-9999px; 
    clip:rect(0,0,0,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; 
} 

Answer 1

看看这个：

div.stars { 
 

 
    width: 270px; 
 

 
    display: inline-block; 
 

 
} 
 

 
    
 

 
input.star { display: none; } 
 

 
    
 

 
label.star { 
 

 
    float: right; 
 

 
    padding: 10px; 
 

 
    font-size: 36px; 
 

 
    color: #444; 
 

 
    transition: all .2s; 
 

 
} 
 

 
    
 

 
input.star:checked ~ label.star:before { 
 

 
    content: '\f005'; 
 

 
    color: #FD4; 
 

 
    transition: all .25s; 
 

 
} 
 

 
    
 
input.star-5:checked ~ label.star:before { 
 

 
    color: #FE7; 
 

 
    text-shadow: 0 0 20px #952; 
 

 
} 
 

 
    
 

 
input.star-1:checked ~ label.star:before { color: #F62; } 
 

 
    
 

 
label.star:hover { transform: rotate(-15deg) scale(1.3); } 
 

 
    
 

 
label.star:before { 
 

 
    content: '\f006'; 
 

 
    font-family: FontAwesome; 
 

 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="stars"> 
 

 
    <form action=""> 
 

 
    <input class="star star-5" id="star-5" type="radio" name="star"/> 
 

 
    <label class="star star-5" for="star-5"></label> 
 

 
    <input class="star star-4" id="star-4" type="radio" name="star"/> 
 

 
    <label class="star star-4" for="star-4"></label> 
 

 
    <input class="star star-3" id="star-3" type="radio" name="star"/> 
 

 
    <label class="star star-3" for="star-3"></label> 
 

 
    <input class="star star-2" id="star-2" type="radio" name="star"/> 
 

 
    <label class="star star-2" for="star-2"></label> 
 

 
    <input class="star star-1" id="star-1" type="radio" name="star"/> 
 

 
    <label class="star star-1" for="star-1"></label> 
 

 
    </form> 
 

 
</div> 
 

 

 
<br > <br > 
 

 
<div class="stars"> 
 

 
    <form action=""> 
 

 
    <input class="star star-5" id="star-6" type="radio" name="star"/> 
 

 
    <label class="star star-5" for="star-6"></label> 
 

 
    <input class="star star-4" id="star-7" type="radio" name="star"/> 
 

 
    <label class="star star-4" for="star-7"></label> 
 

 
    <input class="star star-3" id="star-8" type="radio" name="star"/> 
 

 
    <label class="star star-3" for="star-8"></label> 
 

 
    <input class="star star-2" id="star-9" type="radio" name="star"/> 
 

 
    <label class="star star-2" for="star-9"></label> 
 

 
    <input class="star star-1" id="star-10" type="radio" name="star"/> 
 

 
    <label class="star star-1" for="star-10"></label> 
 

 
    </form> 
 

 
</div>