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>