1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 ul{
8 list-style:none;
9 }
10
11 li{
12 float:left;
13 font-size: 30px;
14 color: #f40;
15 cursor: pointer;
16 }
17
18 .current{
19
20 }
21
22 </style>
23 </head>
24 <body>
25 <div class="wrap">
26 <ul>
27 <li>☆</li>
28 <li>☆</li>
29 <li>☆</li>
30 <li>☆</li>
31 <li>☆</li>
32 </ul>
33 </div>
34
35 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
36
37 <script>
38 $(function () {
39 $("li").on("mouseenter",function () {
40 $(this).text("★").prevAll().text("★");
41 $(this).nextAll().text("☆");
42 });
43
44
45 $("ul").on("mouseleave",function () {
46 $(this).children().text("☆");
47 $(".current").text("★").prevAll().text("★");
48 $(".current").nextAll().text("☆");
49 });
50
51 $("li").on("click",function () {
52 $(this).addClass("current").siblings().removeClass();
53 });
54
55
56
57 });
58 </script>
59
60
61
62
63
64
65
66 </body>
67 </html>
