JQuery实现超链接鼠标提示效果

最新推荐文章于 2021-06-09 22:00:37 发布

转载最新推荐文章于 2021-06-09 22:00:37 发布 · 179 阅读

文章标签：

#javascript #xhtml #ViewUI

本文介绍使用JQuery和CSS两种方式实现自定义提示框的方法。通过JQuery，可以动态创建并显示提示框；而利用CSS则可以更简洁地完成相同的功能。这两种方法都可用于改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、第一种方法用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>