请教一下问题，折腾了我半天了，

<!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=gb2312" />
<title>无标题文档</title>
<style>
#chaborder td{
 width:200px;height:200px;text-align:center
}
#chaborder a{
  display:block; width:200px;height:200px;OVERFLOW: hidden; cursor:default;
}
#chaborder a:hover{width:198px;height:198px;border:1px solid #f00}
#chaborder img{border:0}
body {
background-color: #00CC00;
}
</style>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="600"><table width="600" border="0" cellspacing="0" cellpadding="0" id="chaborder">
      <tr>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
      </tr>
      <tr>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
      </tr>
      <tr>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>现在是鼠标经过，有显示边框，能不能通过键盘的上下左右键来控制鼠标类似的效果，谢谢，我是菜鸟，刚学这行不咋懂，求助

解决方案 »

  1.   

    做了一下：
    <!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=gb2312" /> 
    <title> 无标题文档 </title> 
    <style> 
    #chaborder td{ 
     width:200px;height:200px;text-align:center 
    } 
    #chaborder a{ 
      display:block; width:200px;height:200px;OVERFLOW: hidden; cursor:default; 
    } 
    #chaborder a:hover{width:198px;height:198px;border:1px solid #f00} 
    #chaborder img{border:0} 
    body { 
    background-color: #00CC00; 
    } 
    </style> 
    <script type="text/javascript">
        function MoveCursor(obj){
            var row = parseInt(obj.id.substring(1,2));
            var col = parseInt(obj.id.substring(2,3));
            switch(event.keyCode){
                case 37:
                    if(col > 1)
                        col--;
                    break;
                case 38:
                    if(row > 1)
                        row--;
                    break;
                case 39:
                    if(col < 3)
                        col++;
                    break;
                case 40:
                    if(row < 3)
                        row++;
                    break;
            }
            obj = document.getElementById("a" + row.toString() + col.toString());
            obj.click();
            obj.focus();
            status = obj.innerText;
        }
    </script>
    </head> 
    <body> 
    <table width="600" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
         <td height="600"> <table width="600" border="0" cellspacing="0" cellpadding="0" id="chaborder"> 
           <tr> 
             <td> <a id="a11" href="#" onmouseover="this.focus();" onkeydown="MoveCursor(this);">b11</a> </td> 
             <td> <a id="a12" href="#" onmouseover="this.focus();" onkeydown="MoveCursor(this);">b12</a> </td> 
             <td> <a id="a13" href="#" onmouseover="this.focus();" onkeydown="MoveCursor(this);">b13</a> </td> 
           </tr> 
           <tr> 
             <td> <a id="a21" href="#" onmouseover="this.focus();" onkeydown="MoveCursor(this);">b21</a> </td> 
             <td> <a id="a22" href="#" onmouseover="this.focus();" onkeydown="MoveCursor(this);">b22</a> </td> 
             <td> <a id="a23" href="#" onmouseover="this.focus();" onkeydown="MoveCursor(this);">b23</a> </td> 
           </tr> 
           <tr> 
             <td> <a id="a31" href="#" onmouseover="this.focus();" onkeydown="MoveCursor(this);">b31</a> </td> 
             <td> <a id="a32" href="#" onmouseover="this.focus();" onkeydown="MoveCursor(this);">b32</a> </td> 
             <td> <a id="a33" href="#" onmouseover="this.focus();" onkeydown="MoveCursor(this);">b33</a> </td> 
           </tr> 
         </table> </td> 
       </tr> 
    </table> 
    </body> 
    </html>