延时提示框

烧了回忆取暖

于 2014-05-27 17:51:21 发布

阅读量435

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/kanuoyuan/article/details/27222403

js 专栏收录该内容

47 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>延时提示框</title>
<style>
#div1{ width:50px; height:50px; background:#000; float:left; position:relative;}
#div2{ width:200px; height:200px; background:yellow; float:left; position:relative; left:10px; display:none;}
</style>
<script>
window.onload=function()
{
	var oDiv1=document.getElementById('div1');
	var oDiv2=document.getElementById('div2');
	var timer=null;
	
	oDiv1.onmouseover=function()
	{
		clearTimeout(timer);
		oDiv2.style.display='block';
	}
	oDiv1.onmouseout=function()
	{
		timer=setTimeout(function(){
			  oDiv2.style.display='none';
			},500);
	}
	oDiv2.onmouseover=function()
	{
		clearTimeout(timer);
		oDiv2.style.display='block';
	}
	oDiv2.onmouseout=function()
	{
		timer=setTimeout(function(){
			oDiv2.style.display='none';
			},500);
	}
}
</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>