两个层交互问题

<html>
<head>
<title>层交互</title>
<style>
body{text-align:center;}
#dvCon{position:absolute;width:200px;height:200px;border:1px solid #0099ff;background:#446699;visibility:hidden;z-index:1000;cursor:hand;}
#dvHiddenShow{font-size:12px;color:orange;position:absolute;width:200px;height:200px;background:#4488cc;line-height:200px;}
a{}
a:hover{}
a:visit{}
</style>
<script>
function mouseov()
{
if(event.toElement.parentNode.id=="dvCon")return;
var dv=document.getElementById("dvCon");
//加载数据
createCityData(dv);
dv.style.visibility="visible";
if(mouseov.arguments.length>0)
{
dv.style.left=mouseov.arguments[0].offsetLeft+80;
dv.style.top=mouseov.arguments[0].offsetTop+50;
}
}
function mouseou()
{
if(event.toElement.parentNode.id=="dvCon")return;
var dv=document.getElementById("dvCon");
dv.innerHTML="";
dv.style.visibility="hidden";
}
function createCityData(ele)
{
for(var i=0;i<10;i++)
{
var eleTagA=document.createElement("a");
var eleTagBr=document.createElement("br");
eleTagA.href="http://www.baidu.com";
eleTagA.innerHTML="www.baidu.com";
eleTagA.onmouseover=function(){mouseov();}
eleTagA.onmouseout=function(){mouseou();}
ele.appendChild(eleTagA);
ele.appendChild(eleTagBr);
}
}
</script>
</head>
<body>
<div id="dvCon" onmouseover="mouseov()" onmouseout="mouseou()">
</div>
<div id="dvHiddenShow" onmouseover="mouseov(this)" onmouseout="mouseou(this)">
显示/隐藏
</div>
</body>
</html>