Javascript显示隐藏DIV,如何实现鼠标在DIV上移开才隐藏?

<a href="javascript:;" onmouseover="ShowFloatPic(this)" onmouseout="HideFloatPic(this)">鼠标移上来吧<div class="floatPic">我是隐藏的内容.现在是文本,也许我会变成一张图片</div></a>.floatPic{
display:none;
position:absolute;

}
function ShowFloatPic(obj){
var par=obj.parentNode;
var divs=par.getElementsByTagName("div");
var div=divs[0];
div.style.display="block";
}
function HideFloatPic(obj){
var par=obj.parentNode;
var divs=par.getElementsByTagName("div");
var div=divs[0];
div.style.display="none";
}
上面是我的代码.我现在可以实现,当鼠标移到文字上面,可以显示隐藏的DIV.鼠标从文字上面移开的时候,可以隐藏DIV.但我想实现,当鼠标从文字上面或者鼠标从DIV移开的时候才隐藏DIV. 上面的代码,我是无法把鼠标移到DIV上面去的(一移就触发onmouseout了)

解决方案 »

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

IE6.0 FF3.0 测试正常. 可以移到文字上面
<a onmouseover="ShowFloatPic(this)" >
鼠标移上来吧
</a><div  onmouseover="HideFloatPic(this)" class="floatPic">我是隐藏的内容.现在是文本,也许我会变成一张图片</div><style>
.floatPic{
    display:none;
    position:absolute;
}
</style><script>function ShowFloatPic(obj){
    var par=obj.parentNode;
    var divs=par.getElementsByTagName("div");
    var div=divs[0];
    div.style.display="block";
}
function HideFloatPic(obj){

    obj.style.display="none";
}</script>===========
这样？
你研究一下人家怎么做的吧,这是以前一个网友发的
http://www.doyoe.com/model/xhtmlcss/menu/menu3/1.htm,我觉得有点类似
To 2楼:   我的是IE7.且只测了IE7.
To 5楼:你这种方法的话,如果我鼠标不到DIV上面,只从文字上面移开,那么DIV就不会隐藏了.
我IE 6，测试正常啊鼠标移到DIV或“鼠标移上来吧”上面，文字显示，当鼠标移离DIV时，DIV隐藏。
已初步实现,IE6下测试通过,不知道是不是楼主要的效果,鼠标离开链接的时间灵敏度可以自己调.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>show div and move on div</title>
<style type="text/css">
    .floatPic{
        display:none;
        position:absolute;
        width:200px;
        height:100px;
        boder:1px;
        background:lightblue;
    }
</style>
<script type="text/javascript">
    var fhide=true;
    function ShowFloatPic(obj)
    {
        fhide=false;
        var div=document.getElementById("divinfo");
        div.innerHTML="";
        var itext=obj.firstChild.nodeValue;
        var tnode=document.createTextNode(itext,true);
        div.appendChild(tnode);
        div.style.display="block";
        div.style.left=event.clientX+30;
        div.style.top=event.clientY;
    }
    function prepareHide()
    {
        fhide=true;
        setTimeout("tryHide()",500);
        //setTimeout(function(){if (fhide){HideFloatPic();}},500);
    }
    function tryHide()
    {
        if (fhide)
        {
            HideFloatPic();
        }
    }
    function HideFloatPic()
    {
        var div=document.getElementById("divinfo");
        div.style.display="none";
    }
    function cancelHide()
    {
        fhide=false;
    }
</script>
</head><body style="margin:0;padding:0">
    <li><a href="#" onmouseover="ShowFloatPic(this)" onmouseout="prepareHide(this)">黄瓜</a></li>
    <li><a href="#" onmouseover="ShowFloatPic(this)" onmouseout="prepareHide(this)">土豆</a></li>
    <li><a href="#" onmouseover="ShowFloatPic(this)" onmouseout="prepareHide(this)">西瓜</a></li>
    <li><a href="#" onmouseover="ShowFloatPic(this)" onmouseout="prepareHide(this)">西红柿</a></li>
    <div id="divinfo" class="floatPic" onmouseover="cancelHide();" onmouseout="HideFloatPic();" ></div>
</body>
</html>