JavaScript教程
HTML表格
注意!
这行没有改变颜色.
CSS
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表格每行随鼠标的移动改变颜色示例</title> <style type="text/css" media="all"> body { color:#000; } .dreamdu:hover,.hover { background: #3080CB; color: #fff; } </style> <script type="text/javascript"> /* * 功能:使表格每行随鼠标的移动改变颜色 * 作者:可爱的猴子 www.dreamdu.com/blog/ */ function DreamduColorRows() { var dreamdurows = document.getElementsByTagName('tr'); for ( var i = 0; i < dreamdurows.length; i++ ) { if ( 'dreamdu' != dreamdurows[i].className.substr(0,7) ) { continue; } if ( navigator.appName == 'Microsoft Internet Explorer' ) { // ie不支持 :hover,所以... dreamdurows[i].onmouseover = function() { this.className += ' hover'; } dreamdurows[i].onmouseout = function() { this.className = this.className.replace( ' hover', '' ); } } } } window.onload=DreamduColorRows; </script> </head> <body> <table width="80%" border="0"> <tr class="dreamdu"> <td><a href="http://www.dreamdu.com/javascript/">JavaScript教程</a></td> <td><a href="http://www.dreamdu.com/xhtml/table/">HTML表格</a></td> </tr> <tr> <td>注意!</td> <td>这行没有改变颜色.</td> </tr> <tr class="dreamdu"> <td>CSS</td> <td>HTML</td> </tr> </table> </body> </html>