延时提示框

最新推荐文章于 2017-02-05 17:56:28 发布

woaijianjiandandande

最新推荐文章于 2017-02-05 17:56:28 发布

阅读量314

点赞数

分类专栏： jQuery 文章标签：延时提示框

本文链接：https://blog.csdn.net/woaijianjiandandande/article/details/52965778

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<pre name="code" class="html"><!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>延时提示框</title>
<style>
#div1{
	width:200px;
	height:200px;
	background-color:#CF3;
	}
#div2{
	width:100px;
	height:100px;
	background-color:#CCC;
	display:none;
	}
#div1,#div2{
	float:left;
	}
</style>
<script type="text/javascript">
window.οnlοad=function(){//这一句非常关键
	var div1=document.getElementById("div1");
	var div2=document.getElementById("div2");
	var timer=null;

	//注意以下对代码的整合问题
	div1.οnmοuseοut=div2.οnmοuseοut=function(){//当鼠标都移开的时候，可以设置延时消失
		timer=setTimeout(function(){
								  div2.style.display='none';
								  },1000
						 );
		}
	div1.οnmοuseοver=div2.οnmοuseοver=function(){//当属标都在的时候，可以设置第二个div为显示状态
		clearTimeout(timer);//要记得timer定义之后才能在这里使用
		div2.style.display='block';
	}
/*	div2.οnmοuseοver=function(){
		clearTimeout(timer);
		div2.style.display="block";
		}
	div2.οnmοuseοut=function(){
		setTimeout(function(){
								  div2.style.display='none';
								  },1000
						 )
		}
	*/
	}
	
</script>

</head>

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