Pentagram scoring case
1. When the mouse passes li, the current position is a solid Pentagram star, and the front one is a solid star. The current position is followed by a void. Note that this cannot be completely written in chain programming
2. When the mouse leaves, all the children of comment will become five pointed stars. In addition, find current, and make current and its front solid.
3. When clicking li, add a current class to the current location, and remove the current from the rest
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pentagram scoring case</title> <style> * { padding: 0; margin: 0; } .comment { font-size: 40px; color: #ff16cf; } .comment li { float: left; } ul { list-style: none; } </style> <script src="jquery-1.12.4.js"></script> <script> $(function () { //1. to li Register mouse passing events to make yourself and all the brothers in front of you solid var wjx_k = "☆"; var wjx_s = "★"; $(".comment > li").on("mouseenter", function () { $(this).text(wjx_s).prevAll().text(wjx_s); $(this).nextAll().text(wjx_k); }); //2. to ul Register the time of mouse leaving, and let all li All become hollow $(".comment").on("mouseleave", function () { //2. to ul Register the time of mouse leaving, and let all li All become hollow $(this).children().text(wjx_k); //Do one more thing, find out current，Give Way current and current The front one becomes solid. $("li.current").text(wjx_s).prevAll().text(wjx_s); }); //3. to li Register click events $(".comment>li").on("click", function () { $(this).addClass("current").siblings().removeClass("current"); }); }); </script> </head> <body> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </body> </html>