一、第一种方法用Jquery
<p><a href="http://www.nowamagic.net/" class="tooltip" title="欢迎访问可咔酷">欢迎访问可咔酷</a></p>

然后为class为tooltip的超链接添加mouseover和mouseout事件：

$("a.tooltip").mouseover(function (){  
      //显示 title  
}).mouseout(function (){  
      //隐藏 title  
});

实现这个效果的具体思路如下：

1.当鼠标滑入超链接时， 创建一个div元素，div元素的内容为title属性的值。然后将创建的元素追加到文档中。为它设置x坐标和y坐标，使它显示在鼠标位置的旁边。

2.当鼠标滑出超链接时，移除div元素。

根据分析的思路，写出如下JQuery代码：

$(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>"; //创建 div 元素   
        $("body").append(tooltip);  //把它追加到文档中   
        $("#tooltip")   
            .css({   
                "top": (e.pageY + y) + "px",   
                "left": (e.pageX  + x) + "px"  
            }).show("fast");      //设置x坐标和y坐标，并且显示   
    }).mouseout(function(){        
        this.title = this.myTitle;   
        $("#tooltip").remove();   //移除    
    });   
});

二、第二种方法，不用Jquery用Css

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <meta name="Author" content="Aultoale" />
 6 <style type="text/css">
 7 *{padding:0px;margin:0px;}
 8 body {font:normal 12px Verdana;}
 9 ul{list-style:none;margin:130px;}
10 li{line-height:30px;}
11 ul li a span{display:none;}
12 a:link,a:hover:{display:block;}
13 ul li a:hover span{display:inline;border:1px solid #F96;background:#FFEFEF;color:#009933;padding:10px;}
14 
15 </style>
16 </head>
17 <body>
18 <ul>
19 <li><a href="#">这里是第1个连接<span>这里是说明文字</span></a></li>
20 <li><a href="#">这里是第2个连接<span>这里是说明文字</span></a></li>
21 <li><a href="#">这里是第3个连接<span>这里是说明文字</span></a></li>
22 </ul>
23 </body>
24 </html>

 

 



作者：少帅

您的支持是对博主最大的鼓励，感谢您的认真阅读。

本文版权归作者所有，欢迎转载，但请保留该声明。