jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法
具體代碼如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>login</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<style>
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<body>
<p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" title="這是我的超鏈接提示1">提示1</a></p>
<p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" title="這是我的超鏈接提示2">提示2</a></p>
<p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="這是自帶提示1">自帶提示1</a></p>
<p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="這是自帶提示2">自帶提示2</a></p>
<script>
$(function () {
$("a.tooltip").mouseover(function(e){
var tooltip="<div id='tooltip'>"+this.title+"</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top":e.pageY+"px",
"left":e.pageX+"px"
}).show("fast");
}).mouseout(function(){
$("#tooltip").remove();
});
});
</script>
</body>
</html>
jQuery 事件 - pageY 屬性
顯示鼠標(biāo)指針的位置
show() 方法
顯示所有隱藏的 <p> 元素:
注意:show() 適用于通過(guò) jQuery 方法和 CSS 中 display:none 隱藏的元素(不適用于通過(guò) visibility:hidden 隱藏的元素)。
JQuery中這個(gè)function(e)那個(gè)e是什么意思?
回答一:e是事件,在firefox中只能在事件現(xiàn)場(chǎng)使用window.event,所以只有把event傳給函數(shù)使用。為了兼容FF和其它瀏覽器,一般會(huì)在函數(shù)里重新給e賦值:
e = window.event || e;
也就是說(shuō),如果window.event存在,則該瀏覽器支持直接使用window.event,否在就是不支持,不支持就使用傳進(jìn)來(lái)的e。
回答二:事件對(duì)象event 和我們普通寫(xiě)的 <input type="text" onclick = "aaa(event)">中的這個(gè)event一模一樣
jquery里邊的事件綁定函數(shù)中的參數(shù)e 都是在框架中給處理好了的 兼容各種瀏覽器。
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡(jiǎn)單代碼
下面小編就為大家?guī)?lái)一篇利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡(jiǎn)單代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法
這篇文章主要詳細(xì)介紹了jQuery操縱DOM元素屬性 attr()和removeAtrr()方法,非常的全面細(xì)致,在這里推薦給小伙伴們。2015-01-01
jquery ui dialog實(shí)現(xiàn)彈窗特效的思路及代碼
這篇文章介紹了jquery ui dialog實(shí)現(xiàn)彈窗特效的思路及代碼,有需要的朋友可以參考一下2013-08-08
基于Jquery+Ajax+Json實(shí)現(xiàn)分頁(yè)顯示附效果圖
后臺(tái)action產(chǎn)生json數(shù)據(jù),js獲取json數(shù)據(jù)分頁(yè)顯示,詳細(xì)的示例代碼如下,需要的朋友可以學(xué)習(xí)下2014-07-07
jquery遍歷table的tr獲取td的值實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery遍歷table的tr獲取td的值實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)(封裝和不封裝兩種方式)
這篇文章主要為大家詳細(xì)介紹了jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)的相關(guān)代碼,包括封裝和不封裝兩種方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
手寫(xiě)簡(jiǎn)單的jQuery雪花飄落效果實(shí)例
這篇文章主要給大家介紹了關(guān)于手寫(xiě)簡(jiǎn)單的jQuery雪花飄落的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
jQuery Datatables 動(dòng)態(tài)列+跨列合并實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery Datatables 動(dòng)態(tài)列+跨列合并實(shí)現(xiàn)代碼,需要的朋友可以參考下2020-01-01

