<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
float:left;
margin:10px;
font-size:14px;
color:#fff;
}
#div1{
width:50px;
height:50px;
background:#f00;
line-height:50px;
text-align:center;
}
#div2{
width:200px;
height:150px;
padding:10px;
background:#666;
display:none;
}
</style>
</head>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var timer=null;
oDiv1.onmouseover= oDiv2.onmouseover=function(){
clearTimeout(timer);
oDiv2.style.display='block';
};
oDiv1.onmouseout=oDiv2.onmouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display='none';
},500)
};
}
</script>
<body>
<div id="div1">头像</div>
<div id="div2">
<p>姓名：张三</p>
<p>年龄：25</p>
<p>性别：男</p>
<p>详细信息：</p>
</div>
</body>
</html>仿qq信息延时提示框
猜你喜欢
转载自blog.csdn.net/sunjynyue/article/details/78165198
今日推荐
周排行