仿qq信息延时提示框

最新推荐文章于 2018-07-02 21:16:21 发布

sjy7329

最新推荐文章于 2018-07-02 21:16:21 发布

阅读量698

点赞数

分类专栏：定时器

本文链接：https://blog.csdn.net/sunjynyue/article/details/78165198

版权

定时器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

sjy7329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿qq信息延时提示框

<!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{
复制链接

扫一扫