为什么这里的鼠标事件和样式冲突了，我想要的结果是一开始页面的div是隐藏的，当我鼠标移到那里div区域的时候显示，离开的时候消失，但是这里这个样式如果display不写成none页面一开始是显示的，但是要是弄成none事件有发挥不了作用
<!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=gb2312" />
<title>个人简历</title>
<style type="text/css">
p{
font-size:36px;
color:blue;
}
div{
height:auto;
}
#div1{display:none;}
#div2{display:none;}
#div3{display:none;}
</style>
</head>
<body>
<div onmouseout="div1Off()" onmouseover="div1On()">
<h1>个人资料</h1>
</div>
<div id="div1">
****************
</div>
<div onmouseover="div2On()" onmouseout="div2Off()">
<h1>本人经历</h1>
</div>
<div id="div2">
*******************
</div>
<div onmouseover="div3On()" onmouseout="div3Off()">
<h1>求职愿望和所学知识</h1>
</div>
<div id="div3">
************
</div>
<script type="text/javascript">
var div1=document.getElementById("div1")
var div2=document.getElementById("div2")
var div3=document.getElementById("div3")
var div0=document.getElementsTagName("div")
function div1On(){
div1.style.display="";
}
function div1Off(){
div1.style.display="none";
}
function div2On(){
div2.style.display="";
}
function div2Off(){
div2.style.display="none";
}
function div3On(){
div3.style.display="";
}
function div3Off(){
div3.style.display="none";
}
</script>
</body>
</html>MadMarical
慕的地6079101
一江西流