个人觉得效果还是不错的
。废话不多说，先看看HTML的布局：
rel="stylesheet" type="text/css" href="gradeStyle.css"/>
<script src="jquery-1.11.1.js"></script>
<script src="gradeFunction.js"></script>
商品评分
商品描述：
5分：非常满意
发货速度：
5分：非常满意
物流速度：
5分：非常满意
CSS样式如下（这里没有用到伪类，实现样式变换的方法稍后会提到，是用jQuery实现的）：
.container {width:70%; height:auto; margin-right:auto; margin-left:auto; background:#efefef; padding:10px; border-radius:10px; font-family:"Microsoft YaHei","微软雅黑";}
.container .item {width:95%; height:50px; margin-right:auto; margin-left:auto; background:white; margin-top:10px; margin-bottom:10px; font:20px;}
.container .item dt {height:30px; margin:12px 10px; float:left;}
.container .item dt.star {margin:5px 0px; float:left;}
.container .item dt.grade {height:30px; margin:12px 0px 12px 10px; float:left; color:#ffdd22; font:bold;}
.container .item dt.fen {height:30px; margin:12px 0px; float:left; color:#ffdd22; font:bold;}
.container .item dt.comment {height:30px; margin:12px 0px; float:left; color:#ffdd22; font:bold;}
.container .item a {width:0px; height:0px; margin-top:12px;}
.container .item .current {position:relative; background:url(star.png); z-index:5; width:150px; height:30px; top:5px; left:100px;}
最重要的js如下：
$(document).ready(function(){
//鼠标点击事件
$("div.item").find("a").on("click",function(){
n = $(this).attr("id");
list = $(this).parent("dt").parent("dl");
//改变星星颜色
$(this).prevAll("a").children("img").attr("src","star_hover.png");
$(this).children("img").attr("src","star_hover.png");
$(this).nextAll("a").children("img").attr("src","star.png");
//改变分数描述
list.find("dt.grade").text(n);
switch(n)
{
case "1":
list.find("dt.comment").text("很不满意");
break;
case "2":
list.find("dt.comment").text("不满意");
break;
case "3":
list.find("dt.comment").text("一般");
break;
case "4":
list.find("dt.comment").text("比较满意");
break;
case "5":
list.find("dt.comment").text("非常满意");
break;
}
});
})
所以在不确定之前星星的状态时（可能之前评价过了，现在想修改评价），先改变被点亮星星的样式，用.prevAll("a")来寻找被点击节点之前的所有兄弟节点，然后修改当前被点击的星星的样式，最后用.nextAll("a")修改其后面的兄弟节点。
