<分区>
<分区>
我正在尝试实现星级评级，我正在使用 Bootstrap 图标功能，我正在使用来自 Bootstrap 的星形图标。我能够获得星级评级的所有功能，但我无法获得之前 sibling 的悬停效果。
例如:如果我将鼠标悬停在 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");
});
最佳答案
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;
}
$('.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");
});
关于javascript - 选中时如何为星码赋予悬停效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23405636/