效果如图：利用gif生产的图片 不是很明显，可以直接粘贴代码 运行一下
GIF02.gif
原生代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QQ延时提示框.html</title>
<style>
div{float: left; margin: 10px;}
#div1{width: 50px; height: 50px; background: red;}
#div2{width: 250px; height: 180px; background: #CCCCCC;display: none;}
</style>
</head>
<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.onmouseout=function(){
timer=setTimeout(function(){
odiv2.style.display='none';
},500)
}
}
</script>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
简化代码：
window.onload=function(){
var odiv1=document.getElementById("div1");
var odiv2=document.getElementById("div2");
var timer=null;
odiv1.onmouseover=odiv2.onmouseover=function(){
clearTimeout(timer);
odiv2.style.display='block';
}
odiv1.onmouseout=odiv2.onmouseout=function(){
timer=setTimeout(function(){
odiv2.style.display='none';
},500)
}
}
2利用JQ实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QQ延时提示框==jp.html</title>
<style>
#div1{width: 50px; height: 50px; background: red;position: relative;}
#div2{width: 250px; height: 180px; background: #CCCCCC; position: absolute; left: 60px; top: 0px; display: none; }
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script>
$("#div1").on({
click:function(){
$("#div2").text("你点我做什么，我就是500毫秒延迟显示");
},
mouseenter:function(){
$("#div2").stop().fadeIn(500);
},
mouseleave:function(){
$("#div2").stop().fadeOut(500,function(){
$("#div2").text(" ");
});
}
})
</script>
</body>
</html>
