javascript求解bug

<!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>Untitled Document</title>

<style>
body{
margin:5 auto;
padding:0px;
font-size:12px;}
a{
text-decoration:none;
color:#06F;}
a:hover{
text-decoration:none;
color:#f00;}
.content{
width: 940px;
margin:5px auto;
border:1px solid #A9CBEE;
height:210px;}
.content .left{
float:left;
width:180px;
border-right:1px solid #A9CBEE;
height:210px;
background:#EFF4FB;}
.content .left dl{
margin:0 auto;
text-align:left;
padding:10px 0px 10px 26px;
display:block;}
.content .left dl dt,.content .left dl dd{
margin:0 auto;
display:block;
padding:2px 0px;
outline:none;}
.content .left dl dt{
position:relative;}
.content .left dl dt img{
width:120px;
height:120px;
border:1px solid #CCC;
padding:1px;}
.content .left dl .username a{
font-weight:900;}
.content .left dl .level{
background:url(images/003.gif) no-repeat 35px 8px;
}
.content .left dl .username a:hover{
font-weight:900;}
.content .left dl .userinfohover{
position:absolute;
top:0px;
left:140px;
z-index:1002;
width:260px;
height:200px;
background:url(images/005.png) repeat;
padding:3px;
border-radius:4px;
display:none;
}
.content .left dl .userinfohover .userinfocontent{
border:1px solid #CCC;
padding:10px;
background:#FFF;
height:178px;
position:relative;
}
.content .left dl .userinfohover .userinfocontent .jiantou{
background:url(images/006.png) 0 -20px repeat;
position: absolute;
top:10px;
left:-9px;
width:9px;
height:17px;
display:block;}
.content .left dl .userinfohover .userinfocontent dl{
margin:0px;
padding:0px;
position:relative;
top:-10px;
}
.content .left dl .userinfohover .userinfocontent dl dt{
float:left;
margin-right:10px;
}
.content .left dl .userinfohover .userinfocontent dl dt img{
width:75px;
height:75px;
}
.content .left dl .userinfohover .userinfocontent dl dd{
padding:5px 0px;
}
.content .left dl .userinfohover .userinfocontent .button{
background:#66AD0C;
border:1px solid #060;
border-radius:2px;
padding:1px 5px;
margin-right:5px;
color:#FFF;}
.content .left dl .userinfohover .userinfocontent .add{
background:url(images/007.png)  no-repeat scroll 3px center #66AD0C;
padding-left:13px;}
.content .left dl .userinfohover .userinfocontent ol{
padding:0px 0px 0px 2px;
margin-top:10px;}
.content .left dl .userinfohover .userinfocontent ol li{
list-style-type:decimal;
margin-left:18px;
padding:2px 0px;}
.content .right{
float:left;
width:758px;
height:210px;
background:#f5f5f5;}
.content .right .louceng{
padding:5px 10px;
border-bottom:1px solid #A9CBEE;
}
.content .right .louceng .loucengright{
float:right;}
.content .right .write{
min-height:145px;
padding:5px 10px;}
.content .right .loucengbottom{
border-bottom:0px;
border-top:1px solid #A9CBEE;
}
.content .right .loucengbottom .loucengright a{
margin:0px 2px;
color:#999;
}
.content .right .loucengbottom .loucengright a:hover{
margin:0px 2px;
color:#999;
text-decoration:underline;
}
.content .right .loucengbottom .loucengright .aone{
color:#F00 !important;
}
</style>
<script>
window.onload = function()
{
var oBody = document.getElementById('body');
var oDiv = document.getElementsByTagName('div');
var oImg = [];
var oUserInfo = [];
var i=0;
for(i=0;i<oDiv.length;i++)
{
switch(oDiv[i].className)
{
case 'userinfohover':
oUserInfo.push(oDiv[i]);
break;
case 'left':
oImg.push(oDiv[i].getElementsByTagName('img')[0]);
}
}
for(i=0;i<oImg.length;i++)
{
oImg[i].index = i;
oImg[i].onmouseover = function()
{
oUserInfo[this.index].style.display = 'block';
};
oUserInfo[i].index = i;
oUserInfo[i].onmouseover = function()
{
oUserInfo[this.index].style.display = 'block';
};
oUserInfo[i].onmouseout = function()
{
var index = this.index;
oUserInfo[index].style.display = 'none';
};

}
};
</script>
</head><body id="body">
<div class="content">
    <div class="left">
     <dl>
         <dt>
                <a href=""><img src="images/001.jpg" id="image1"></a>
                <div class="userinfohover" id="userinfohover">
                    <div class="userinfocontent">
                        <div class="jiantou"></div>
                        <dl>
                            <dt><img src="images/001.jpg"></dt>
                            <dd>账号：coke0</dd>
                            <dd>昵称：coke0</dd>
                            <dd><a href="" class="button add">关注</a><a href="" class="button">博客</a><a href="" class="button">空间</a></dd>
                        </dl>
                        <ol>
                            最近帖子
                            <li><a href="">11</a></li>
                            <li><a href="">22</a></li>
                            <li><a href="">33</a></li>
                        </ol>
                    </div>
                </div>
            </dt>
            <dd class="username"><a href="">coke0</a></dd>
            <dd>coke0</dd>
            <dd class="level">等级：</dd>
        </dl>
    </div>
    <div class="right">
     <div class="louceng">
         <div class="loucengright"><a href="">#2</a> 得分：0</div>
            <div>回复于： 2013-01-23 14:05:09 </div>
        </div>
        <div class="write">
        那个大侠帮我看看啊，急着学习
        </div>
        <div class="louceng loucengbottom">
         <div class="loucengright"><a href="" class="aone">对我有用[0]</a> <a href="">丢个板砖[0]</a><a href=""> 引用</a> |<a href="" class="aone"> 举报</a> |<a href=""> 管理</a> | <a href="">TOP</a> </div>
            <div><a href="">专访杨刚：移动互联网是孕育下一代高科技企业的土壤</a></div>
        </div>
    </div>
</div>
<div class="content">
    <div class="left">
     <dl>
         <dt>
                <a href=""><img src="images/001.jpg" id="image1"></a>
                <div class="userinfohover" id="userinfohover">
                    <div class="userinfocontent">
                        <div class="jiantou"></div>
                        <dl>
                            <dt><img src="images/001.jpg"></dt>
                            <dd>账号：coke0</dd>
                            <dd>昵称：coke0</dd>
                            <dd><a href="" class="button add">关注</a><a href="" class="button">博客</a><a href="" class="button">空间</a></dd>
                        </dl>
                        <ol>
                            最近帖子
                            <li><a href="">11</a></li>
                            <li><a href="">22</a></li>
                            <li><a href="">33</a></li>
                        </ol>
                    </div>
                </div>
            </dt>
            <dd class="username"><a href="">coke0</a></dd>
            <dd>coke0</dd>
            <dd class="level">等级：</dd>
        </dl>
    </div>
    <div class="right">
     <div class="louceng">
         <div class="loucengright"><a href="">#2</a> 得分：0</div>
            <div>回复于： 2013-01-23 14:05:09 </div>
        </div>
        <div class="write">
        那个大侠帮我看看啊，急着学习
        </div>
        <div class="louceng loucengbottom">
         <div class="loucengright"><a href="" class="aone">对我有用[0]</a> <a href="">丢个板砖[0]</a><a href=""> 引用</a> |<a href="" class="aone"> 举报</a> |<a href=""> 管理</a> | <a href="">TOP</a> </div>
            <div><a href="">专访杨刚：移动互联网是孕育下一代高科技企业的土壤</a></div>
        </div>
    </div>
</div>
<div class="content">
    <div class="left">
     <dl>
         <dt>
                <a href=""><img src="images/001.jpg" id="image1"></a>
                <div class="userinfohover" id="userinfohover">
                    <div class="userinfocontent">
                        <div class="jiantou"></div>
                        <dl>
                            <dt><img src="images/001.jpg"></dt>
                            <dd>账号：coke0</dd>
                            <dd>昵称：coke0</dd>
                            <dd><a href="" class="button add">关注</a><a href="" class="button">博客</a><a href="" class="button">空间</a></dd>
                        </dl>
                        <ol>
                            最近帖子
                            <li><a href="">11</a></li>
                            <li><a href="">22</a></li>
                            <li><a href="">33</a></li>
                        </ol>
                    </div>
                </div>
            </dt>
            <dd class="username"><a href="">coke0</a></dd>
            <dd>coke0</dd>
            <dd class="level">等级：</dd>
        </dl>
    </div>
    <div class="right">
     <div class="louceng">
         <div class="loucengright"><a href="">#2</a> 得分：0</div>
            <div>回复于： 2013-01-23 14:05:09 </div>
        </div>
        <div class="write">
        那个大侠帮我看看啊，急着学习
        </div>
        <div class="louceng loucengbottom">
         <div class="loucengright"><a href="" class="aone">对我有用[0]</a> <a href="">丢个板砖[0]</a><a href=""> 引用</a> |<a href="" class="aone"> 举报</a> |<a href=""> 管理</a> | <a href="">TOP</a> </div>
            <div><a href="">专访杨刚：移动互联网是孕育下一代高科技企业的土壤</a></div>
        </div>
    </div>
</div>
</body>
</html>javascript 显示隐藏

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

哪个大虾帮我看看，我的js有个bug，就是我直接从头像图片把鼠标移开，个人信息那块不会消失。只能是鼠标从个人信息移开才会消失。
如果我加上一段代码，oImg[i].onmouseout = function()
{
var index = this.index;
oUserInfo[index].style.display = 'none';
};因为个人信息那块没有和头像连在一起，所以个人信息那块鼠标不能移上去，想要移上去就会消失。
加上下面那句
oImg[i].onmouseout = function()
            {
                oUserInfo[this.index].style.display = 'none';
            };
加上那句，然后改改css
.content .left dl dt img{
width:140px;
height:120px;
border:1px solid #CCC;
padding:1px;}
哦，明白了，你的意思是让布局改变，两块能够挨着，就像咱们论坛那一块是用一个空div连在一起的