HTML
<body>
<div class="content">
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</div>
</body>
CSS
*{
margin: 0;
padding: 0;
}
.content{
font-size: 40px;
}
.content li{
float: left;
}
ul{
list-style: none;
}
jQuery
<script src="jQuery/jquery-1.12.3.js"></script>
<script>
$(function () {
// 给li注册鼠标经过事件,让自己和前面所有的兄弟都变成实心
var wjx_k="☆";
var wjx_s="★";
$("li").on("mouseenter",function () {
$(this).text(wjx_s).prevAll().text(wjx_s);
$(this).nextAll().text(wjx_k);
});
// 给ul注册鼠标离开事件,让所有li都变成空心
$("ul").on("mouseleave",function () {
$(this).children().text(wjx_k);
// 找到current 让current和current前面的都变成实心
$(" .current").text(wjx_s).prevAll().text(wjx_s);
});
// 给li注册点击事件
$("li").on("click",function () {
$(this).addClass("current").siblings().removeClass("current");
});
});
</script>