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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。