<!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>
