我想要的效果是,当鼠标移到表格的行上时,整行背景变色,鼠标移出时背景回到之前的颜色;
但是我这个弄出来。鼠标移入时背景是变了色的。但是移出时背景没有变色还是移入时变的那个颜色,求大神帮解决一下,并能说出我的问题出在哪里最好,谢谢哈;^_^`
下面是我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function(){
var otadb = document.getElementById('osd');
var oblocolo ='';
for(var i=0;i<otadb.tBodies[0].rows.length;i++){
//下面是鼠标移到表格上时整行背景变色,当鼠标离开时整行背景回到原来的颜色;
otadb.tBodies[0].rows[i].onmousemove = function(){
oblocolo=this.style.backgroundColor;
this.style.backgroundColor = '#552940';
};
otadb.tBodies[0].rows[i].onmouseout = function(){
this.style.backgroundColor =oblocolo;
}
//下面的代码是背景隔行变色
if(i % 2 == 0){
otadb.tBodies[0].rows[i].style.backgroundColor = '#ccc';
}
else{
otadb.tBodies[0].rows[i].style.backgroundColor = '';
}
};
};
</script>
</head>
<body>
<table id="osd" border="1" width="500">
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>张三</td>
<td>男</td>
<td>21</td>
</tr>
<tr>
<td>02</td>
<td>李四</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>03</td>
<td>张伟</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>04</td>
<td>赵翰义</td>
<td>男</td>
<td>40</td>
</tr>
<tr>
<td>05</td>
<td>周伟</td>
<td>男</td>
<td>35</td>
</tr>
</tbody>
</table>
</body>
</html>
很简单,因为你事件用错了,把 onmousemove 改成 onmouseenter 就行了╮(╯▽╰)╭
因为你 onmousemove 是在内部移动的时候不断触发,所以把 oblocolo 改成了 #552940 所以 onmouseout 时会改不回来...