涓???绗?涓?绉??規???query
<p><a href="http://www.nowamagic.net/" class="tooltip" title="娆㈣?璁塊????????>娆㈣?璁塊????????lt;/a></p> ?跺??涓?lass涓?ooltip??瓒??炬?ユ坊??mouseover??mouseout浜?浠訛?
$("a.tooltip").mouseover(function (){
//?劇ず title
}).mouseout(function (){
//???? title
}); 瀹??拌?涓????????蜂???璺?濡?涓?锛?
1.褰?榧???婊??ヨ??炬?ユ?訛? ??寤轟?涓?div??绱?锛?div??绱?????瀹逛負title灞??х???箋???跺??灏???寤虹????绱?杩藉???版??妗ｄ腑??涓哄??璁劇疆x??????y????锛?浣垮???劇ず?ㄩ???浣?缃?????杈廣??
2.褰?榧???婊??鴻??炬?ユ?訛?绉婚??iv??绱???
?規??????????璺?锛????哄?涓?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(); //绉婚??
});
}); 浜???绗?浜?绉??規?锛?涓???query??ss
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涓?杩???lt;span>杩?????璇存????瀛?</span></a></li>
20 <li><a href="#">杩?????绗?2涓?杩???lt;span>杩?????璇存????瀛?</span></a></li>
21 <li><a href="#">杩?????绗?3涓?杩???lt;span>杩?????璇存????瀛?</span></a></li>
22 </ul>
23 </body>
24 </html> ?
?
浣???锛?灏?甯?
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)