很久没写博客了,今天发现了个问题,当在IE6下,鼠标经过表格内某行,不会变色,这是因为IE6不支持hover,所以只能用js了。
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> .accounttable{border:1px solid #A2ECFF;} .accounttable thead{font-weight:bold;text-align:center;} .accounttable thead td{background-color:#C0EDFF;} .accounttable tr{height:30px;line-height:30px;} .accounttable tr td {padding:3px;text-align:center;} .accounttable .hasDatepicker{width:50px;} .accounttable tr:hover,tr.hover{background:#7ADAFF;} </style> </head> <body> <table class="accounttable" width="90%" border="0" cellSpacing="0" cellPadding="0"> <thead> <tr> <td>姓名</td> <td>日期</td> <td>金额</td> <td>说明</td> </tr> </thead> <tbody> <tr> <td>张三</td> <td>2009-01-02</td> <td>12.35</td> <td>A股</td> </tr> <tr> <td>张三</td> <td>2009-02-02</td> <td>122.35</td> <td>B股</td> </tr> <tr> <td>张三</td> <td>2009-03-02</td> <td>132.35</td> <td>现金</td> </tr> <tr> <td>张三</td> <td>2009-04-02</td> <td>142.35</td> <td>港股</td> </tr> <tr> <td>张三</td> <td>2009-05-02</td> <td>152.35</td> <td>保险</td> </tr> <tr> <td>张三</td> <td>2009-06-02</td> <td>162.35</td> <td>基金</td> </tr> </tbody> </table> <script type="text/javascript"> var rows = document.getElementsByTagName("tr"); for(var i = 0; i < rows.length; i++){ rows[i].onmouseover = function(){ this.className = "hover"; } rows[i].onmouseout = function(){ this.className = ""; } } </script> </body> </html>