本文實例講述了JQuery實作超連結滑鼠提示效果的方法。分享給大家供大家參考。具體分析如下：
瀏覽器其實已經自帶了超連結提示，只要在超連結中加入title屬性就可以了。但這個提示效果的反應速度是非常緩慢的，大概要延遲1秒左右。我們現在需要的是當滑鼠移到超連結的那一瞬間就出現提示。這時就需要移除a標籤中的title提示效果，自己動手做一個類似功能的提示。
HTML設計如下：
然後為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。
為什麼當滑鼠滑出去時，要把屬性值又賦給屬性title呢？因為當滑鼠滑出時，需要考慮再次滑入時的屬性title值，如果不將myTitle的值重新賦給title屬性，當再次滑入時，title的值就為空了。
var x = lO;
var y = 20;
$("#tooltip").css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
OK，到這裡問題都解決了，滑鼠超連結提示效果實現。 希望本文所述對大家的jQuery程式設計有所幫助。
