鼠标放上去显示层 DIV

<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
td {
 font-family: "宋体";
 font-size: 12px;
}
</style> 
<script type="text/javascript">
 function show(obj){  
  document.getElementById('testShowDivBlock').style.display="block";
  obj.style.background="#FF9933";
 }  
 function hide(obj){  
  document.getElementById('testShowDivBlock').style.display="none";
  obj.style.background="#FFFFFF";  
 } 
 </script>
 </head>

 <body>

<table>  
 <tr>
  <td with="80px"></td>
  <td id='h' onMouseOver="javascript:show(this);" onMouseOut=hide(this); style="cursor:hand">鼠标放上去1</td>  
 </tr>  
</table>  
<br> <br> <br> <br>
 <table>  
 <tr>
  <td with="80px"></td>
  <td id='h' onMouseOver="javascript:show(this);" onMouseOut=hide(this); style="cursor:hand">鼠标放上去2</td>  
 </tr>  
</table>


 
 <div id="testShowDivBlock" style="position:absolute;display:none;">
     <table width="194" height="101" border="0" cellpadding="0" cellspacing="1" bgcolor="#C1F0FF">
   <tr align="center" bgcolor="#DFF8FF">
      <td><strong>语1文</strong></td>
   <td><strong>数学</strong></td>
   <td><strong>英语</strong></td>
   </tr>
   <tr align="center" bgcolor="#FBFEFF">
      <td>120</td>
   <td>113</td>
   <td>127</td>
   </tr>
   <tr align="center" bgcolor="#DFF8FF">
   <td><strong>语文</strong></td>
   <td><strong>数学</strong></td>
   <td><strong>英语</strong></td>
   </tr>
   <tr align="center" bgcolor="#FBFEFF"><td>120</td>
   <td>113</td>
   <td>127</td>
   </tr>
  </table>
</div>
 </body>
</html>

你可能感兴趣的:(div)