实现： 1，鼠标移动到第三个星星，则一二三星星变亮，后两个变暗
2，鼠标点击某个星星后，可以继续选择，但拿开后星星会定格住你点击的位置
<script type="text/javascript"> //★ $(function () { //由于不好获取点击的span的是何坐标，所以声明一个变量来记录点击的span标签的id var mark; $("*").css({ margin: "0px", padding: "0px;" }); $("span") .css({ fontSize: "20px", color: "yellow" }) .mouseover(function () { $(this).text("★") .prevAll().text("★").end() .nextAll().text("☆").end() .click(function () { mark = $(this).attr("id"); }) }); $("div") .css({ "100px", height: "20px", border: "1px solid black" }) .mouseout(function () { //如果mark内有内容，则在鼠标离开div后，让星星数量变回你最近一次点击的位置 if (mark) { $("#" + mark) .text("★") .prevAll().text("★").end() .nextAll().text("☆"); } //mark中没有值，意味着你没有点击任何星星，这时，让所有的星星都黯淡吧 else { $("span").text("☆"); } }); }); </script> </head> <body> <div id="div"> <span id="1">☆</span><span id="2">☆</span><span id="3">☆</span><span id="4">☆</span><span id="5">☆</span> </div> </body>