实现： 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({ width: "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>
时间： 2024-11-10 15:20:13