Jquery中的DOM操作 (十.超链接提示效果)

最新推荐文章于 2019-11-05 09:31:10 发布

张大仙是个妖怪

最新推荐文章于 2019-11-05 09:31:10 发布

阅读量380

点赞数

分类专栏： # jQuery选择器和DOM操作文章标签： jQuery 操作DOM节点 DOM对象

本文链接：https://blog.csdn.net/NDKHBWH/article/details/60774340

版权

jQuery选择器和DOM操作专栏收录该内容

26 篇文章 0 订阅

订阅专栏

        $(function(){
            var x = 10;
            var y = 20;
            $("a.tooltip").mouseover(function(e){
                this.mytitle=this.title;
                this.title="";
               var tooltip="<div id='tooltip'>"+this.mytitle+"</div>";
                $("body").append(tooltip);
                $("#tooltip").css({"top": e.pageY+y+"px","left": e.pageX+x+"px"}).show("fast");
            }).mouseout(function(){
                this.title= this.mytitle;
                $("#tooltip").remove();
            }).mousemove(function(e){
                $("#tooltip").css({"top": e.pageY+y+"px","left": e.pageX+x+"px"});
            });
        });

<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2</a></p>
<p><a href="#"  title="自带提示1.">自带提示1</a></p>
<p><a href="#"  title="自带提示1.">自带提示1</a></p>
</body>

    <style type="text/css">
        body{
            margin:0;
            padding:40px;
            background:#fff;
            font:80% Arial, Helvetica, sans-serif;
            color:#555;
            line-height:180%;
        }
        p{
            clear:both;
            margin:0;
            padding:.5em 0;
        }
        /* tooltip */
        #tooltip{
            position:absolute;
            border:1px solid #333;
            background:#f7f5d1;
            padding:1px;
            color:#333;
            display:none;
        }
    </style>