<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
div{
width:400px;
height:50px;
margin:100px auto;
}
div li{
float: left;
padding:5px;
font-size: 27px;
color:#ff7b00;
cursor: pointer;
/* 不让文字被选中 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div>
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</div>
<script src="../jQuery/jquery.js"></script>
<script>
$(function(){
var before = "☆";
var after = "★";
//1.给li注册事件,让自己和前面的所有的li多变成实心
$('div li').on('mouseenter',function(){
//end():让其恢复到上一次的状态,并返回之前的元素
$(this).text(after).prevAll().text(after).end().nextAll().text(before);
});
//2.给ul注册鼠标离开事件,让所有的li多变成空心
$('ul').on('mouseleave',function(){
$(this).children().text(before);
//找到current,让current和current前面的变成实心。
$('li.current').text(after).prevAll().text(after);
});
//3.给li注册点击事件
$("div li").on('click',function(){
$(this).toggleClass('current').siblings().removeClass('current');
});
});
</script>
</body>
</html>
效果图: