鼠标移动到超链接上自动弹出一个层

来源：互联网发布：单片机仿真器有什么用编辑：程序博客网时间：2024/06/06 03:52

<!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=utf-8" />
<title>演示文档</title>
<style type="text/css">
.tooltip{
  background-color:yellow;
  border-style:solid;
  border-width:1px;
  border-color:red;
}

</style>
<script type="text/javascript">
function initEvent(){
  var links=document.getElementsByTagName("a");
  for(var i=0;i<links.length;i++){
   var link=links[i];
   link.onmouseover=linkMouseOver;
   link.onmouseout=linkMouseOut;

  }
}
function linkMouseOver(){
  var div=document.createElement("div");//动态创建层
  div.className="tooltip";//相对定位
  div.style.position="absolute";//Y轴现对于鼠标的Y位置
  div.style.top=window.event.clientY;//X轴现对于鼠标的X位置
  div.style.left=window.event.clientX;
  div.innerHTML="<span style='border:dotted 1px green'>显示出来<font color='red'>红色的</font>字体文本框<span>";
  document.body.appendChild(div);//把自动创建的层添加到body中显示出来

}
function linkMouseOut(){
  var divs=document.getElementsByTagName('div');
  for(var i=0;i<divs.length;i++){
   var div=divs[i];
   if(div.className == "tooltip"){ //如果显示出来的层的名字等于刚才自动创建的层的名字则隐藏
   document.body.removeChild(div);//把层移动掉

   }
  }

}
</script>
</head>
<body onload="initEvent()">
<a href="http://www.badu.com" title="百度">百度</a><br /><br />
<a href="http://www.google.com" title="谷歌">谷歌</a><br /><br />
<a href="http://www.badu.com" title="百度">百度</a><br /><br />
<a href="http://www.google.com" title="谷歌">谷歌</a><br /><br />
</body>
</html>