標籤：class tle use .sh sem doctype 座標 pos 3.1
HTML：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>超連結提示效果</title> 6 <script src="js/jquery-3.1.1.js"></script> 7 <script src="js/3_3.js"></script> 8 </head> 9 <body>10 <p><a href="#" class="tooltip" title="這是我的超連結提示1.">提示1.</a></p>11 <p><a href="#" class="tooltip" title="這是我的超連結提示2.">提示2.</a></p>12 <p><a href="#" title="這是內建提示1.">內建提示1.</a> </p>13 <p><a href="#" title="這是內建提示2.">內建提示2.</a> </p>14 </body>15 </html>
JS：
1 /** 2 * Created by Administrator on 2017/1/10. 3 */ 4 $(function () { 5 var x = 10; 6 var y = 20; 7 $("a.tooltip").mouseover(function (e) { 8 9 this.myTitle = this.title;10 this.title = "";11 //建立div元素12 var $tooltip = $("<div id=‘tooltip‘>"+this.myTitle+"</div>");13 $("body").append($tooltip);14 //設定x，y座標，並顯示15 $("#tooltip").css({"position":"absolute","top":(e.pageY+y)+"px",16 "left":(e.pageX+x)+"px"}).show("fast");17 18 }).mouseout(function () {19 this.title = this.myTitle;20 $("#tooltip").remove();21 22 }).mousemove(function (e) { //提示效果隨著滑鼠移動而移動23 $("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});24 });25 })
效果：
Jquery——超連結提示效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
