Question

javascript 延时显示隐藏DIV

<div id="div1" onmouseover="div2.style.display='block'" onmouseout=" ">div1</div>
<div id="div2">div2</div>

如上两个DIV，鼠标移到DIV1上时，DIV2显示了，然后鼠标移到DIV2，再移开，2秒后DIV2隐藏，
请问怎么实现？
我想在DIV1里面判断怎么弄呢？
就是鼠标移到DIV1上，DIV2就显示，然后分两种情况：
1，鼠标没有经过DIV2，直接移开了DIV1，要让DIV2延迟隐藏，怎么写？
2，鼠标从DIV1移动到DIV2，然后又从DIV2移开，让DIV2隐藏，怎么写？

还有就是一开始DIV2会显示出来，怎么样能让DIV2一开始是隐藏的呢？

Answer 1

鼠标移到DIV1上时，DIV2显示，然后鼠标移到DIV2，再移开，2秒后DIV2隐藏：

<script type="text/javascript">
function showDiv2(){
document.getElementById("div2").style.display="block";
}
function hiddenDiv2(){
setTimeout("document.getElementById(\"div2\").style.display=\"none\"",2000);
}
</script>

<div id="div1" onmouseover="showDiv2()" onmouseout=" ">div1</div>
<div id="div2" onmouseout="hiddenDiv2()" >div2</div>

追问

你好。我试了，唯一不足是一开始DIV2是显示的。怎么样让DIV2一开始是隐藏的呢？

追答

换成下一句就行了
div2

Answer 2

var s=null;//延时器
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');

window.onload = function(){
div1.onmouseover=function(){
if( s != null ) clearTimeout(s);

div2.style.display='block';
}
div1.onmouseout=function(){
s = setTimeout(function(){
div2.style.display='none';
},2000)
}
div2.onmouseover=function(){
if( s != null ) clearTimeout(s);
}
div2.onmouseout=function(){
if( s != null ) clearTimeout(s);
s = setTimeout(function(){
div2.style.display='none';
},2000)
}
}
其实，需要注意的是，由始至终只使用一个变量作为延时器timeout，每次触发mouseover或mouseout，令div2有所变化，需要延时的时候，先将timeout变量clear了，再设置timeout，这样可以阻止忽闪忽现的情况。

代码未经测试，纯属手打，随意乱写，仅供参考学习 ^_^

关于补充：
在DIV2加上style="display:none"就可以了
或者你喜欢可以用js document.getElementById('div2').style.display='none';

Answer 3

div2 增加
onmouseout="show2();"
加上这些：
<script>
function show2(){setTimeout(show3,2000);}
function show3(){div2.style.display="none";} </script>
div2用document.getElementById("div2")找到

追问

我想在DIV1里面判断怎么弄呢？
就是鼠标移到DIV1上，DIV2就显示，然后分两种情况：
1，鼠标没有经过DIV2，直接移开了DIV1，要让DIV2延迟隐藏，怎么写？
2，鼠标从DIV1移动到DIV2，然后又从DIV2移开，让DIV2隐藏，怎么写？

Answer 4

setTimeOut or setInterval

追问

请写完整代码可以吗

追答

http://baike.baidu.com/link?url=BSudQvMcIFpdb9UfFWTZT1y6zVqyl5e3uPW3e9ko7qY1vRCyXWVNCE9f1GyH0mCGxFyw54mzILsNgT76dJ8E5_

请参考

Answer 5

您好：js的定时就可以，或者jq的setInterval()

追问

div2

div3

开始的时候DIV3是显示的
请问怎么样让DIV3开始的时候是隐藏的？

追答

那就把div加上样式：style="display:none;"