功能:
- 鼠标悬停在上方时,该空心五星及前面的空心五星均改为实心
- 鼠标不点击,鼠标离开时实心五星恢复空心
- 若鼠标点击,实心效果保留
- 当鼠标再次悬停其他位置并点击,效果更新
- 若鼠标再次悬停不点击,效果清除,恢复空心
思路:
- 设计全局变量,用于保持实心效果
- 鼠标悬停时,遍历所有星星,将发生悬停事件的星星以及所有位置在该星星之前的星星都改为实心
- 鼠标点击时,改变全局变量,改变星星状态,改变方法同上
- 鼠标移出时,判断全局变量,若满足要求,则清空效果,恢复空心;若不满足效果,则不清空,保持实心状态,之后初始化全局变量
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.0.min.js"></script>//引入jQuery文件
</head>
<body>
<table align="center">
<tr>
<td id="1">☆</td>
<td id="2">☆</td>
<td id="3">☆</td>
<td id="4">☆</td>
<td id="5">☆</td>
</tr>
</table>
<scr