超链接大家肯定很熟悉了，不就是a标签跳转到其他页面嘛，一般浏览器给的超链接提示地址会出现在浏览器左下角来提示用户这个链接将会跳转到哪一个网址。

但是一般用户都不会去注意左下角的链接地址，如果我们让用户能快速看到链接地址那该怎么办呢？

上图是我实验的一个效果，要想达到这个效果，网上貌似也很多，但是我就是没找到……

我这次将html代码直接写在js文件中，文档加载自动添加，只需要设置一下css样式即可

CSS:

<style>
        #test_warp{
            background:rgba(0,0,0,0.53);
            border:1px solid #818181;
            padding:4px 5px;
            border-radius:3px;
            display:none;
            max-width:200px;
            position:absolute;
            z-index:9999;/*最上层显示*/ 
        }
        #test_warp #test_title{
            color:#fff;
            font-size:12px;
        }
        #test_warp #test_link{
            font-size:11px;
            color: #99f0fa;
        }
    </style>

CSS样式可以根据自己喜欢的来写就行了

JS主要是根据用户的鼠标移动到超链接上面的时候来获取超链接的各各信息来显示

JS:

$(document).ready(function(){
   var html = "<div id="test_warp">" +
       "<p id="test_title"></p>" +
       "<p id="test_link"></p>" +
       "</div>";
    $("body").prepend(html);
//文档加载完成后，会输出用来显示超链接提示的html代码
//body下的任何a被鼠标移动上去后触发， 这里不能使用hover，因为hover移动上去后就不会根据鼠标移动再移动了。
    $("body a").mousemove(function(event){//这里传一个event参数来获取鼠标坐标
       var html = $(this).attr("title");//获取当前a标签的title内容与链接地址
       var link = $(this).attr("href");
       var x = event.pageX;//获取当前鼠标的x坐标和y坐标
       var y = event.pageY;
        $("#test_warp").css({//显示提示层
           display:"block",
           top:y+15,//这里+15和+10 主要是防止鼠标挡住提示层
            left:x+10
        });
       $("#test_warp #test_title").html(html);//最后输出超链接内容和地址到对应的内容中去
       $("#test_warp #test_link").html(link);
   });
    $("body a").mouseout(function(){//相反鼠标移开后隐藏提示层
            $("#test_warp").css({
                display:"none"
            });
    })
});
//代码就到此结束了,css样式喜欢怎么改好看就怎么改好看咯

以上代码会将a标签的 title 和 href内容展现出来，如果需要更多自行获取信息