效果如下:
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>延迟提示框</title>
<style>
div{
float:left;
margin:10px;}
#div1{
width:100px;
height:100px;
background:#0F3;}
#div2{
width:400px;
height:400px;
background:#900;
display:none;}
</style>
<script>
window.onload=function(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var timer=null;
/* div1.onmouseover=function(){
clearTimeout(timer);
div2.style.display='block';
};
div1.onmouseout=function(){
timer=setTimeout(function(){
div2.style.display='none';},500);
};
div2.onmouseover=function(){
//div2.style.display='block';
clearTimeout(timer);
};
div2.onmouseout=function(){
timer=setTimeout(function(){
div2.style.display='none';},500);
};
*/
//将以上代码合并
div1.onmouseout=div2.onmouseout=function(){
timer=setTimeout(function(){
div2.style.display='none';},500);
};
div1.onmouseover=div2.onmouseover=function(){
clearTimeout(timer);
div2.style.display='block';
};
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>