鼠标经过某个div时,弹出一个div块

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3  <head>
 4   <title> New Document </title>
 5  </head>
 6 <style type="text/css">
 7   td {cursor:pointer}
 8   #popmenu {display:none;position:absolute;padding:5px;border:1px solid black;background-color:white}
 9 </style>
10  <body>
11   <table>
12   <tr>
13 <td>第一行</td>
14 <td>第一行</td>
15   </tr>
16   <tr>
17 <td>第二行</td>
18 <td>第二行</td>
19   </tr>
20   <tr>
21 <td>第三行</td>
22 <td>第三行</td>
23   </tr>
24   </table>
25   <div id="popmenu">
26   开发中心--技术部--北京总部
27   </div>
28  </body>
29  <script type="text/javascript">
30  var menu=document.getElementById("popmenu");
31  var trs=document.getElementsByTagName("tr");
32  for(i=0;i<trs.length;i++){
33    trs[i].onmouseover=function(event){
34       e=event?event:window.event;
35       t=e.target||e.srcElement;
36       menu.style.left=getPointerX(e)+"px";
37   menu.style.top=getPointerY(e)+"px";
38   menu.style.display="block";
39    }
40  trs[i].onmouseout=function(event){
41       e=event?event:window.event;
42       t=e.target||e.srcElement;
43       menu.style.left=getPointerX(e)+"px";
44   menu.style.top=getPointerY(e)+"px";
45   menu.style.display="none";
46    }
47  }
48  function getPointerX(event) {
49     return event.pageX || (event.clientX +(document.documentElement.scrollLeft || document.body.scrollLeft));
50  }
51  function getPointerY(event) {
52     return event.pageY || (event.clientY +(document.documentElement.scrollTop || document.body.scrollTop));
53  }
54  </script>
55 </html>

网页效果如图:

原文地址:https://www.cnblogs.com/liuyu7177/p/3048455.html