js建立提示框

时间 2019-12-25
原文原文链接
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0px;padding: 0px;}
        body{font-size: 14px;font-family: Microsoft YaHei;color: #666;}
        #container{width: 300px;height: 400px;margin: 50px auto;border: 1px solid #ccc;}
        a{text-decoration: none;position: relative;}
        #tip{background: #ccc;color:#fff;position: absolute;height: 20px;padding: 0 20px 0 20px;line-height:20px;display: none;border: 1px solid #ccc;border-radius: 10px;}
    </style>
</head>
<body>
    <div id="container">
        我看到泊风留言的第一瞬间，有一种汪淼拿着照相机看到倒计时的感受，感受有一条小蛇蛰伏在咱们身边。
        故事要从今天下午提及。我写了一篇文章，转发到了微博，
        <a href="#"id="a-1"data-text="what are you">顺便@了个人朋友泊风与林白。</a>让我吃惊的是，泊风竟然能够给我留言。
        <a href="#"id="a-2"data-text="how are you">在个人微博设置里只有我关注的人才能留言，</a>而泊风他们并不在个人关注名单里。
        <div id="tip"></div>
    </div>
</body>
<script type="text/javascript">
    window.onload=function(){
        var oA_1=document.getElementById("container").getElementsByTagName("a");
        var oD_1=document.getElementById("tip");
        for(var i=0;i<oA_1.length;i++){
            index=i;
            oA_1[i].onmouseover=function(){//鼠标移进
                oD_1.style.display="block";
               oD_1.innerHTML=oA_1[index].getAttribute("data-text");
            };
            oA_1[i].onmouseout=function(){//鼠标移出
                    oD_1.style.display="none";
            };
            oA_1[i].onmousemove=function(){//鼠标移动
                if(event){//兼容ie
                    var e=event||window.event;
                }
                oD_1.style.top= e.clientY+"px";
                oD_1.style.left= e.clientX+"px";
            }
        }
    }
</script>
</html>