代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.all{
list-style: none;
font-size: 50px;
}
.all>li{
display: inline-block;
}
</style>
</head>
<body>
<ul class="all">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
//prev查找上一个兄弟,prevAll查找上面所有的兄弟
//next查找下一个兄弟,nextAll查找后面所有的兄弟
var sx_wjx = '★';
var kx_wjx = '☆';
$('.all>li').on('mouseenter',function(){
//$(this).text(sx_wjx).prevAll().text(sx_wjx);
//$(this).nextAll().text(kx_wjx);
//使用end方法返回上一个状态
$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx)
}).on('mouseleave',function(){
$('.all>li').text(kx_wjx);
//给标记的五角星以及之前的五角星变为实心
$('.all>li[biaoji]').text(sx_wjx).prevAll().text(sx_wjx);
}).on('click',function(){
//给要点击的li做一个标记,attr添加属性
$(this).attr('biaoji','aaa').siblings().removeAttr('biaoji');
})
})
</script>