类似于实现这样：
-----
index.html:
<!DOCTYPE html> <html> <head> <title>星星评分</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <!--引入jquery--> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="box clear"> <div class="list"> <i class="star1"></i> <i class="star"></i> </div> <div class="list"> <i class="star1"></i> <i class="star"></i> </div> <div class="list"> <i class="star1"></i> <i class="star"></i> </div> <div class="list"> <i class="star1"></i> <i class="star"></i> </div> <div class="list"> <i class="star1"></i> <i class="star"></i> </div> <div class="txt">非常好</div> </div> </body> </html>
--
index.js:
$(function(){ //定义一个arr数组，值为："非常差",'差',"一般","满意","非常满意" var arr=["非常差",'差',"一般","满意","非常满意"]; //鼠标经过 $('.list').mouseover(function(){ $(this).nextAll().find(".star1").css("z-index","0");//每次移动进去后，先让next所有同辈元素都是灰色星星 $(this).find(".star1").css("z-index",1);//让移上去的哪个自己是黄色星星 $(this).prevAll().find(".star1").css("z-index",1);//让移上去哪个星星的前面的所有同辈元素都是黄色星星 $(".txt").text(arr[$('.box').find(".list").index($(this))]);//通过父元素，获得当前元素在父元素中的index }) })