选中时如何为星号代码悬停效果？

Question

我正在尝试实施星级评级，我正在使用引导程序图标功能，我正在使用引导程序中的星形图标。我能够获得星级的所有功能，但我没有得到以前兄弟姐妹的悬停效果。

例如：如果我将鼠标悬停在star4上，那么它应该将star1,2,3的颜色变为某种颜色。但我无法获得该功能。

我的代码是：

 <span class="glyphicon glyphicon-star star1" id="q6-1" value="1"></span>
 <span class="glyphicon glyphicon-star star1" id="q6-2" value="2"></span>
 <span class="glyphicon glyphicon-star star1" id="q6-3" value="3"></span>
 <span class="glyphicon glyphicon-star star1" id="q6-4" value="4"></span>
 <span class="glyphicon glyphicon-star star1" id="q6-5" value="5"></span>

Jquery是：

 $('.star1').click(function(){
 var rating = $(this).attr('id');
 var res = rating.split("-");
 rating = res[1]; 

 for(var i=0;i<5;i++){
   if(i<=rating){
        $('#q6-'+i).addClass("color-star"); 
   }       
 }
 alert(rating);
 });

$('.star1').hover(function(){
 $(this).addClass("color-star");
 }, function() {
 $(this).removeClass("color-star");

});

Answer 1

CSS Implementation

HTML

<div class='rating'> 
<span class="glyphicon glyphicon-star star1" id="q6-1" value="1"></span>
 <span class="glyphicon glyphicon-star star1" id="q6-2" value="2"></span>
 <span class="glyphicon glyphicon-star star1" id="q6-3" value="3"></span>
 <span class="glyphicon glyphicon-star star1" id="q6-4" value="4"></span>
 <span class="glyphicon glyphicon-star star1" id="q6-5" value="5"></span>
</div>

CSS

.rating{
    float:left;
}
.star1{
    float:right;
}
.star1:hover, .star1:hover ~ .star1{
    color:gold;    
}

---

jQuery Implementation

$('.star1').hover(function(){
   $(this).css('color', 'gold').prevAll('.star1').css('color', 'gold');
 }, function() {
    $(this).css('color', 'black').prevAll('.star1').css('color', 'black');
});

或者，使用您的代码：

$('.star1').hover(function(){
   $(this).addClass("color-star").prevAll('.star1').addClass("color-star");
 }, function() {
    $(this).removeClass("color-star").prevAll('.star1').removeClass("color-star");
});