1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 a{display: block;font-size: 40px;margin: 100px; 130px;} 8 #msg{ 600px;height: 150px;background-color: grey;color: white;display: none;position: absolute;} 9 10 </style> 11 <script> 12 var arr=["1212","22222","33333","4444"]; 13 window.onload=function(){ 14 var aAs=document.getElementsByTagName("a"); 15 var oMsg=document.getElementById("msg"); 16 17 for(var i=0;i<aAs.length;i++){ 18 aAs[i].index=i; 19 20 aAs[i].onmouseover=function(){ 21 oMsg.innerHTML=arr[this.index]; 22 oMsg.style.display="block"; 23 } 24 25 aAs[i].onmouseout=function(){ 26 oMsg.style.display='none'; 27 } 28 aAs[i].onmousemove=function(ev){//ev为当前事件 29 var e=ev||window.event; 30 oMsg.style.left=e.clientX+5+"px"; 31 oMsg.style.top=e.clientY+5+"px"; 32 } 33 } 34 } 35 </script> 36 </head> 37 <body> 38 <a href="#">唐太宗</a> 39 <a href="#">唐高宗</a> 40 <a href="#">武则天</a> 41 <a href="#">唐玄宗</a> 42 <div id="msg"></div> 43 </body> 44 </html>