js解决鼠标移动到单元格上呈现手型 可点击 并移动上去变换图像

1.单元格可点击

<table width="200" height="54" border="1">
  <tr>
    <td style="cursor:hand" οnclick="window.open('http://sina.com/')"><div align="center">asdsad</div></td>
  </tr>
</table>

 

 

2.单元格可点击+背景颜色变化

<table width="200" height="54" border="1">
  <tr>
    <td id="td1" style="cursor:hand" οnclick="window.open('http://sina.com/')" οnmοuseοver="this.style.background='red'" οnmοuseοut="this.style.background='green'"><div align="center">asdsad</div></td>
  </tr>
</table>

 

3.变换背景图片

<table width="200" height="54" border="1">
  <tr>
    <td id="td1" style="cursor:hand;" οnclick="window.open('http://sina.com/')" οnmοuseοver="this.style.backgroundImage='url(http://bbs.51js.com/images/default/logo.gif)'" οnmοuseοut="this.style.background='green'"><div align="center">asdsad</div></td>
  </tr>
</table>

 

 

4<style>
#header li#icon_l1 a{display:block;width:80px;height:90px;background:url(../image/icon.gif) transparent no-repeat center center}
#header li#icon_l1 a:hover{display:block;width:80px;height:90px;background:url(../image/icon_active.gif) transparent no-repeat center center}
</style>
<div id="header"><ul>
<li id="icon_l1"><a href="#"></a></li>
</ul></div>