html鼠标悬停显示title html内容

最近碰到一个问题,鼠标悬停到A标签时显示一个div,查了一下才知道是title属性里面的内容

直接上代码

    //个性title提示样式
    $(function () {
        $("a").each(function (b) {//这里是控制标签
           if (this.title) {
               var c = this.title; //把title的赋给自定义属性 myTilte ,屏蔽自带提示
               var a = 30; //设置提示框相对于偏移位置,防止遮挡鼠标
               $(this).mouseover(function (d) { //鼠标移上事件
                   this.title = "";
                   //alert(c);
                   $("body").append('<div id="tooltip" style="z-index:100000;width:100px;height:100px;background-color:red;position:absolute;">' + c + "</div>"); //创建提示框,添加到页面中
                    $("#tooltip").css({
                      left: (d.pageX + a) + "px",
                     top: d.pageY + "px",
                        opacity: "1"
                    }).show(250) //设置提示框的坐标,并显示
                    
                }).mouseout(function () { //鼠标移出事件
                    this.title = c; //重新设置title
                    $("#tooltip").remove() //移除弹出框
               }).mousemove(function (d) { //跟随鼠标移动事件
                   $("#tooltip").css({
                        left: (d.pageX + a) + "px",
                       top: d.pageY + "px"
                    })
                })
            }
        })
    });

样式的话自己调一下这里就不在美化了。html代码里面a标签里面要有title

posted @ 2015-12-01 15:20  zzli  阅读(4691)  评论(1编辑  收藏  举报