正文 1877字数 482,014阅读

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>HTML 表格每行随鼠标的移动改变颜色 示例 -- 酷站代码</title> <style type="text/css" media="all"> body { color:#000; } .dreamdu:hover, .hover { background: #3080CB; color: #fff; } </style> <script type="text/javascript"> /* * 功能：使表格每行随鼠标的移动改变颜色 */ 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>
Run code
Cut to clipboard