先看图
1：前端HTML
<body> <div id="rank"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p>一般</p> <p id="pf"></p> </div> </body>
2：JS实现 demo
<script type="text/javascript">
var shuzu=['很差','较差','一般',"很好",'非常好'];
window.onload=function() {
var oDiv=document.getElementById("rank");
var aLi=oDiv.getElementsByTagName("li");
var oP=oDiv.getElementsByTagName("p")[0];
var i=0;
for(i=0;i<aLi.length;i++) {
aLi[i].index=i;//为当前加个属性index--》索引值
aLi[i].onmouseover=function(){ //让五角星变亮
oP.style.display='block';
oP.innerHTML=shuzu[this.index];
for(i=0;i<=this.index;i++) {
aLi[i].className='active';
}
document.getElementById("pf").style.display="none";
}
aLi[i].onmouseout=function(){ //移开事件
oP.style.display='none';
for(i=0;i<=this.index;i++) {
aLi[i].className='';
}
document.getElementById("pf").style.display="none";
}
aLi[i].onclick=function(){ //点击将评分结果提交到服务器
oP.style.display='none';
document.getElementById("pf").style.display="block";
//提交到服务器
document.getElementById("pf").innerHTML= '您的本次评分：'+(this.index+1)+'分';
}
}
}
</script>
3：Jquery实现 demo
<script type="text/javascript">
var shuzu=['很差','较差','一般',"很好",'非常好'];
$(function(){
var liHightCount=0;
$("#rank ul li").mouseover(function(){
$("#rank ul li").addClass("active");//给所有的li都高亮
$(this).nextAll("#rank li").removeClass("active"); //当前li-->后的li高亮样式类名remove
liHightCount=$("#rank ul").find("li.active").length; //获取高亮的li的个数
$("#rank p:eq(0)").show().html(shuzu[liHightCount-1]);
$("#pf").hide();
}).click(function(){
$("#rank p:eq(0)").hide();
$("#pf").show().html('您的本次评分：'+liHightCount+"分");
});
})
</script>