不好意思 上次没有把图给截上来，自己么注意。
先看CSDN的效果图吧！就是当有人在下载评分的时候，当他把鼠标放在五角星的时候，这个五角星以及它前面的五角星全部变成淡黄色这种颜色，而后面的颜色不便。
我们所要实现的效果就如此。
然后 这是现在做的图的效果。本质上的差不多 都是基于同一样的原理。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function indexOf(arr, element) {//返回第几个五角星被鼠标选中
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function inieEvent() {
var TableRaking = document.getElementById("TableRaking");//获取表格
var tds = TableRaking.getElementsByTagName("td");//获取表格下的所有td
for (var i = 0; i < tds.length; i++) {//遍历所有单元格
var td = tds[i];
td.style.cursor = "pointer";//设置鼠标形状
td.onmouseover = eventClick;//触发onmouseover函数
}
}
function eventClick() {
var TableRaking = document.getElementById("TableRaking");
var tds = TableRaking.getElementsByTagName("td");
var tdNum = indexOf(tds, this);
for (var i = 0; i <= tdNum; i++) {
var td = tds[i];
td.style.background = "red";//设置选中的背景色为红色
}
for (var i = tdNum + 1; i <= tds.length; i++) {//把选中以后的背景设置为白色
var td = tds[i];
td.style.background = "white";
}
}
</script>
</head>
<body onload="inieEvent()">
<table id="TableRaking">
<tr>
<td> ★</td><td>★</td><td>★</td><td>★</td><td>★</td>
</tr>
</table>
</body>
</html>