<style type="text/css">
.pop{width:357px;height:194px;background:url(http://www.code-design.cn/eg/bgUserCard.gif) no-repeat;position:absolute;display:none;}
.pop .ct{margin:10px 10px 10px 60px;}
</style> 
<div class="pop" id="popDV" onmouseout="hide(event)" onmouseover="clearTimeout(mouseOutTimer)"><div class="ct">内容内容内容内容<a href="http://www.code-design.cn">编程设计网</a>内容内容内容内容内容内容</div></div>
<div id="dvCT">今天上班公司要我做一个鼠标事件， 要求就象goolge翻译里面，翻译后生成的一个页面,<a href="#">鼠标悬停在一个文本</a>上面弹出一个 框框样的东西， 本来感觉还比较容易做的， 就是一个悬停事件，<a href="#"> 显示层</a>就可以了， 后面才发现， 要弹出的那个框框形状有点特别， 不知道哪位大虾知道用js画形状比较特别的框?</div>
<script type="text/javascript">
function getAbsolutePosition(o){//获取对象的绝对位置
  var p={x:o.offsetLeft,y:o.offsetTop};
  while(o=o.offsetParent){
    p.x+=o.offsetLeft;p.y+=o.offsetTop;
  }
  return p;
}

function showPopUp(){//
  var p=getAbsolutePosition(this),popDV=document.getElementById('popDV');
  popDV.style.left=p.x+this.offsetWidth+'px';
  popDV.style.top=p.y+'px';
  popDV.style.display='block';
}
var mouseOutTimer=false;
window.onload=function(){//加载完毕后给a标签添加事件
  var as=document.getElementById('dvCT').getElementsByTagName('a');
  for(var i=0;i<as.length;i++){
    as[i].onmouseover=showPopUp;
    as[i].onmouseout=function(){mouseOutTimer=setTimeout(function(){hide(true);},100);}
  }
}
function hide(e){
  var dv=document.getElementById('popDV');
  if(e===true)dv.style.display='none';//计时器直接隐藏
  else{//如果鼠标从弹出层移出时，需要判断是否是移动到弹出层里面的子控件上了，因为移动到子控件，如a标签等上时，也会触发onmuseout事件
    var refObj=e.toElement||e.relatedTarget;
    if(!dv.contains(refObj))dv.style.display='none';//不是div的子控件则隐藏
  }
  
}
if(typeof HTMLElement!='undefined')HTMLElement.prototype.contains=function(o){//扩展非IE浏览器下的contains方法
  if(this==o)return true;
  while(o=o.parentNode)if(o==this)return true;
  return false;
}
</script>