如何实现tip的延时效果

下面是代码
我希望的是 鼠标离开红色的 div的 时候 
div不是立刻消失 而是1秒后在消失 
如果在1秒内回道了红色div的范围  就不消失.........
<!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"></style> <body >
<div id='div' style="height:100px; width:100px; border:1px solid #cccccc;background-color:#cccccc"></div>
<div id='tip' style="height:200px; width:200px; border:1px solid #cccccc;background-color:#FF0000;position:absolute;display:none"></div>
<script type="text/javascript">
var $ = function(id){return document.getElementById(id)}
window.onload = function(){
$('div').onmouseover = function(){$('tip').style.display = "block"}
$('div').onmouseout = function(e){
e = window.event || e;
var obj = e.relatedTarget||e.toElement;
if(obj == $('tip'))return;
$('tip').style.display = "none"
}
$('tip').onmouseout=function(){$('tip').style.display = "none"}
}
</script>
</body>
</html>

解决方案 »

  1.   

      $('div').onmouseout = function(e){
    setTimeOut(function(){
                    e = window.event || e;
                    var obj = e.relatedTarget||e.toElement;
                    if(obj == $('tip'))return;
                    $('tip').style.display = "none"
    },1000)
            }
      

  2.   


    var $ = function(id){return document.getElementById(id)}window.onload = function(){
        var _OK = true;
        $('div').onmouseover = function()
        {
            $('tip').style.display = "block";
        }
        
        
        $('div').onmouseout = function(e){
                e = window.event || e;
                var obj = e.relatedTarget||e.toElement;
                if(obj == $('tip'))return;
                $('tip').style.display = "none"
        }
        
        $('tip').onmouseout=function(){
            _OK = true;
            setTimeout(function (){
                if (_OK) { $('tip').style.display = "none"; }
            }, 1000);  
        }
        $('tip').onmouseover=function(){ _OK = false; }
    }
      

  3.   

    <!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"></style>    <body >
    <div id='div' style="height:100px; width:100px; border:1px solid #cccccc;background-color:#cccccc"></div>
    <div id='tip' style="height:200px; width:200px; border:1px solid #cccccc;background-color:#FF0000;position:absolute;display:none"></div>
    <script type="text/javascript">
    var $ = function(id){return document.getElementById(id)}
    window.onload = function(){
    var myTime="";
            $('div').onmouseover = function(){
    $('tip').style.display = "block"
    if(myTime!="") clearTimeout(myTime);
    }
            $('div').onmouseout = function(e){
    myTime=setTimeout(function(){$('tip').style.display = "none"},1000)
            }
            $('tip').onmouseout=function(){$('tip').style.display = "none"}
    }
    </script>
    </body>
    </html>
      

  4.   

    都有问题哦
    setimemout不是写在
    myTime=setTimeout(function(){$('tip').style.display = "none"},1000)而是写在函数上的  如： setTimeout(function(){},1000)肯定要一个变量去当记时器 如 time = setTimeout(function(){},1000)当离开红色的div 移动到灰色的地方的时候  红色的div应该还是显示的