<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
li{
list-style: none;
float: left;
font-size: 36px;
color: blue;
cursor: pointer;
}
</style>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
var stark = "☆";
var stars = "★"
$(function(){
//未点击之前 li标签本身及前面全部添加样式
$("li").on("mouseenter", function () {
$(this).text(stars).prevAll().text(stars);
$(this).nextAll().text(stark);
});
//鼠标离开事件，让所有的星星为空心；
$("li").on("mouseleave", function () {
$("li").text(stark);
//让class 为current的 前面所有的星星为实体，后面的星星为空
$("li.current").text(stars).prevAll().text(stars);
})
//注册点击事件，让当前点击的前面的星星全为实体；
$("li").on("click",function () {
$(this).addClass("current").siblings().removeClass("current");
})
})
</script>
</head>
<body>
<div>
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</div>
</body>
</html>
