很简单,直接上码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq五星评分</title> <style> *{ margin: 0; padding: 0; } .box{ position: relative; width: 200px; height: 100px; margin: 0 auto; } .box ul{ width: 100px; display: inline-block; } .box li { display: inline-block; height: 25px; line-height: 25px; color: pink; } .point{ position: absolute; display: inline-block; width: 30px; height: 20px; left: 100px; color: pink; } </style> </head> <script src="../js/jquery-3.2.1.min.js"></script> <script> $(function () { $('.box li').on('mouseenter',function () { $(this).text('★').prevAll().text('★').end().nextAll().text('☆'); var $point=$(this).index()+1; $('.point').text($point+"分"); }); }); </script> <body> <div class="box"> <ul > <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> <span class="point"></span> </div> </body> </html>