html+css实现星级评价

css:

.star_bg {
    width: 150px;
    height: 26px;
    background: url(/*星星图片*/) repeat-x;
    position: absolute;
    right: 15px;
    bottom: 23px;
    z-index: 999;   
    overflow: hidden;
}
.star {
    height: 100%;
    width: 30px;
    margin-right: 10px;
    line-height: 10em;
    position: absolute;
    z-index: 3;
}
.star:hover {    
    background: url(/*星星图片*/) repeat-x 0 -27px!important; left: 0; z-index: 2; 
} 
.star_1 { left: 0; } 
.star_2 { left: 30px; } 
.star_3 { left: 60px; } 
.star_4 { left: 90px; } 
.star_5 { left: 120px; } 
.star_1:hover { width: 30px; } 
.star_2:hover { width: 60px; } 
.star_3:hover { width: 90px; } 
.star_4:hover { width: 120px; } 
.star_5:hover { width: 150px; }

　　html:

<div id="starBg" class="star_bg">                    	
	<input type="radio" id="starScore1" class="score score_1" value="1" name="score">
	<a href="#starScore1" class="star star_1" title="差"><label for="starScore1">差</label></a>
	<input type="radio" id="starScore2" class="score score_2" value="2" name="score">
	<a href="#starScore2" class="star star_2" title="较差"><label for="starScore2">较差</label></a>
	<input type="radio" id="starScore3" class="score score_3" value="3" name="score">
	<a href="#starScore3" class="star star_3" title="普通"><label for="starScore3">普通</label></a>
	<input type="radio" id="starScore4" class="score score_4" value="4" name="score">
	<a href="#starScore4" class="star star_4" title="较好"><label for="starScore4">较好</label></a>
	 <input type="radio" id="starScore5" class="score score_5" value="5" name="score">
	 <a href="#5" class="star star_5" title="好"><label for="starScore5">好</label></a>
</div>

　　js:

//zepto
$('#starBg').on('tap','a',function(e){
	console.log(this.previousElementSibling.value);//获取星级值
});

　　

转载于:https://www.cnblogs.com/diaokyle/p/6867387.html