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>
成果展示: