本文實例講述了JQuery實現超鏈接鼠標提示效果的方法。分享給大家供大家參考。具體分析如下：

瀏覽器其實已經自帶了超鏈接提示，只需在超鏈接中加入title屬性就可以了。但是這個提示效果的響應速度是非常緩慢的，大概要延遲1秒左右啊。我們現在需要的是當鼠標移動到超鏈接的那一瞬間就出現提示。這時就需要移除a標簽中的title提示效果，自己動手做一個類似功能的提示。

HTML設計如下：

<p><a href="http://down.vevb.com/info/" class="tooltip" title="歡迎訪問A5源碼資訊">歡迎訪問A5源碼資訊</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(); //移除

});

});

此時的效果有兩個問題：首先是當鼠標滑過后，a標簽中的title屬性的提示也會出現：其次是設置x坐標和y坐標的問題，由于自制的提示與鼠標的距離太近，有時候會引起無法提示的問題（鼠標焦點變化引起mouseout事件）。

為了移除a標簽中的title提示功能，需要進行以下幾個步驟：

1. 當鼠標滑入時，給對象添加一個新屬性，并把title的值傳給這個屬性，然后清空屬性title的值。

this.myTitle = this.title;

s.title = "";

var tooltip = "<div id='tooltip'>"+ this.myTitle +"<//div>";

//創建 div 元素

2. 當鼠標滑出時，再把對象的myTitle屬性的值又賦給屬性title。

this.title = this.myTitle;

為什么當鼠標滑出時，要把屬性值又賦給屬性title呢？因為當鼠標滑出時，需要考慮再次滑入時的屬性title值，如果不將myTitle的值重新賦給title屬性，當再次滑入時，title的值就為空了。

為了解決第2個問題，需要重新設置提示元素的top和left的值，代碼如下所示，為top增加了10px，為left增加了20px：

var x = lO;

var y = 20;

$("#tooltip").css({

"top": (e.pageY+y) + "px",

"left": (e.pageX+x) + "px"

});

OK，到這里問題都解決了，鼠標超鏈接提示效果實現。

希望本文所述對大家的jQuery程序設計有所幫助。