<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>延时器事件作业</title> <style type="text/css"> .box{ width: 120px; border: 2px solid #ededed; position: relative; padding-bottom: 20px; } .box >a{ display: inline-block; width: 100px; height: 100px; background-color: #ccc; margin-top: 20px; } .show_box{ width: 100px; height: 100px; background-color: #ededed; position: absolute; left: 121px; top: 0px; } </style> </head> <body> <div class="box" id="box"> <a href="#">移动弹窗</a> <div>内容内容</div> <div>内容内容</div> <div>内容内容</div> <div>内容内容</div> <div class="show_box" id="show_box"> 显现盒子 </div> </div> </body> <script type="text/javascript"> var boja=document.getElementsByClassName('box')[0].children[0]; // 获取 父元素对象 var showbox=document.getElementById('show_box'); //获取显现的box 对象 showbox.style.display = 'none'; // 展开对想象隐藏 boja.onmouseover=function(){ showbox.style.display = 'block'; //显现子元素 // 鼠标移到父元素 clearTimeout(time); // 清除延时器 time为清除延时器返回的句柄 } showbox.onmouseover=function(){ // 鼠标移到子元素 clearTimeout(time); // 清除延时器 } boja.onmouseout=timefun; //鼠标离开父元素 运行函数 showbox.onmouseout=timefun; //鼠标离开子元素 运行函数 function timefun(){ // 函数 time = setTimeout(function(){ // 运行延时器 并把结果付给变量 setTimeout 连个参数 第一个函数 第二个时间 showbox.style.display = 'none'; //子对象 隐藏 },500) } </script> </html>