1.、当鼠标滑过头像时，让侧边显示出来 。
2、当鼠标离开头像时，让侧边延时消失，防止用户离开头像划向侧边时，由于中间有间隙侧边消失，增加超时调用。
3、当鼠标滑过侧边时，侧边显示出来，
4、当鼠标从侧边划向头像时，防止用户离开侧边划向头像时，由于中间有间隙侧边消失，增加超时调用。
5、如果用户划回头像，则侧边显示，如果划向其他区域则侧边消失。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移入延时</title>
<style>
.box{
position: relative;
width: 300px;
height: 600px;
margin:0 auto;
background-color: blue;
border-radius: 16px;
box-shadow: 1px 1px 10px 2px orange;
padding: 20px 10px 0;
font-size: 20px;
box-sizing:border-box;
}
.children{
position: absolute;
top:0;
right: 108%;
width: 200px;
height: 200px;
border-radius: 6px;
background-color: gray;
display: none;
padding: 20px 10px 0;
font-size: 16px;
box-sizing:border-box;
color: #fff;
}
.child{
position: absolute;
top:60px;
left: 20px;
width: 80px;
height: 80px;
background-color: purple;
border-radius: 6px;
box-shadow: 1px 1px 10px 2px orange;
line-height: 80px;
text-align: center;
color: red;
cursor: pointer;
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var timer=null;
oDiv1.onmouseover=oDiv2.onmouseover=function(){
oDiv1.style.display="block";
clearTimeout(timer);
}
oDiv1.onmouseout=oDiv2.onmouseout=function(){
timer=setTimeout(function(){
oDiv1.style.display="none";
},600);
}
//简化前代码：
// oDiv2.onmouseover=function(){
// oDiv1.style.display="block";
// clearTimeout(timer);
// }
// oDiv2.onmouseout=function(){
// timer=setTimeout(function(){
// oDiv1.style.display="none";
// },600);
// }
// oDiv1.onmouseover=function(){
// oDiv1.style.display="block";
// clearTimeout(timer);
// }
// oDiv1.onmouseout=function(){
// timer=setTimeout(function(){
// oDiv1.style.display="none";
// },600);
// }
}
</script>
</head>
<body>
<div class="box">欢迎使用QQ2098
<div class="children" id="div1">您的QQ等级为999级</div>
<div class="child" id="div2">头像</div>
</div>
</body>
</html>成果展示：
