js创建提示框

最新推荐文章于 2023-07-21 13:48:48 发布

weixin_33961829

最新推荐文章于 2023-07-21 13:48:48 发布

阅读量116

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/2879089/blog/730020

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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.οnlοad=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].οnmοuseοver=function(){//鼠标移进
                oD_1.style.display="block";
               oD_1.innerHTML=oA_1[index].getAttribute("data-text");
            };
            oA_1[i].οnmοuseοut=function(){//鼠标移出
                    oD_1.style.display="none";
            };
            oA_1[i].οnmοusemοve=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>

转载于:https://my.oschina.net/u/2879089/blog/730020