鼠标滑过表格内单个单元格的背景变色特效

发布时间：2014-09-06 15:29:54　来源/作者：学技巧网页制作　分类：表格图层阅读：0次点评一下

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标滑过表格内单个单元格的背景变色特效</title> <style type="text/css"> td.tdCurr {background:#FC0} </style> </head> <body> <table width="750" border="0" cellspacing="1" cellpadding="0" bgcolor="#666666"> <tr> <td height="30" bgcolor="#FFFFFF"> </td> <td height="30" bgcolor="#FFFFFF"> </td> <td height="30" bgcolor="#FFFFFF"> </td> <td height="30" bgcolor="#FFFFFF"> </td> <td height="30" bgcolor="#FFFFFF"> </td> </tr> <tr> <td height="30" bgcolor="#FFFFFF"> </td> <td height="30" bgcolor="#FFFFFF"> </td> <td height="30" bgcolor="#FFFFFF"> </td> <td height="30" bgcolor="#FFFFFF"> </td> <td height="30" bgcolor="#FFFFFF"> </td> </tr> <tr> <td height="30" bgcolor="#FFFFFF"> </td> <td height="30" bgcolor="#FFFFFF"> </td> <td height="30" bgcolor="#FFFFFF"> </td> <td height="30" bgcolor="#FFFFFF"> </td> <td height="30" bgcolor="#FFFFFF"> </td> </tr> </table> <script type="text/javascript"> var tds = document.getElementsByTagName('td'); for (var i = 0; i < tds.length; i++) { tds[i].onmouseover = function() { this.style.background = '#FC0'; } tds[i].onmouseout = function() { this.style.background = '#fff'; } } </script> </body> </html>

(www.xuejiqiao.com)提示：可修改后再运行代码!

很多例子做的是鼠标隔行变色，现在要做的是鼠标滑过表格内的每个单元格变色，而不是整行变色。

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！

学技巧网站制作

鼠标滑过表格内单个单元格的背景变色特效

极酷的表格（表格的颜色不断变化）

点击按钮后给Div图层设置随机背景颜色

鼠标滑过表格内单个单元格的背景变色特效