超链接提示效果jQuery+CSS+html
我们知道浏览器自带了超链接提示, 只需要在超链接中加入 title 属性就可以了.
<a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a>
然而这个提示效果的响应速度是挺缓慢的.考虑到良好的用户体验, 需要的是当鼠标移动到超链接的那一瞬间就出现提示. 这时就需要移除<a>标签title的提示效果.
实现这个效果具体思路如下:
a.当鼠标滑入超链接.=====mouseover事件
b.创建一个<div>元素, <div>元素内容为title属性的值. ======append追加内容
c.为它设置 x 坐标和 y坐标, 使其显示在鼠标位置的旁边.======绝对定位 e.pageY e.pageX
d.当鼠标划出超链接, 移除<div>元素.======remove
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{margin:0;padding:40px;background-color:#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-color:#F7F5D1;padding:1px;color:#333;display:none;}
</style>
</head>
<body>
<p><a href="#" class="tooltip" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a></p>
<p><a href="#" class="tooltip" title="女子隐瞒已婚与他人恋爱 骗财3万余元终获刑">女子隐瞒已婚与他人恋爱 骗财3万余元终获刑</a></p>
<p><a href="#" class="tooltip" title="陈红母亲股权变更签名鉴定为假 涉提交虚假材料">陈红母亲股权变更签名鉴定为假 涉提交虚假材料</a></p>
<p><a href="#" class="tooltip" title="两女子因问路未获回应围殴保洁员(图)">两女子因问路未获回应围殴保洁员(图)</a></p>
<hr>下面浏览器自带超链接title提示<hr>
<p><a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a><p>
<p><a href="#" title="女子隐瞒已婚与他人恋爱 骗财3万余元终获刑">女子隐瞒已婚与他人恋爱 骗财3万余元终获刑</a><p>
<script type="text/javascript" src="js/jquery-1-8-3.js"></script>
<script type="text/javascript">
(function($){
//自制提示和鼠标距离太近,有时候会引起无法提示的问题,需要重新设置提示元素的 top 和 left 值.
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
//显示title
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>";//创建<div>元素
$("body").append(tooltip);//把div追加到文档中
$("#tooltip")
.css({
"top": ( e.pageY + y ) + "px",
"left": ( e.pageX + x ) + "px" //设置x坐标和y坐标, 并且显示
}).show("fast"); }).mouseout(function() {
//隐藏title
this.title = this.myTitle;
$("#tooltip").remove();
});
})(jQuery);
</script>
</body>
</html>
效果如下:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfkAAAFDCAIAAAC2heCgAAAgAElEQVR4nO2cPYglyZbfE+SIBSGBLPH0YYkFwRLGbZCM9R+CNkQ17SyEIUaNrDZKvHUEhRCijUBMt1jabV803ZAISpZk7mO7ZTWkYGmBnMcaQnBvTlbOXA2ap5QRXydOnMiMqq6ueyfm/yMZau7Nj4jIjF+cPBG3uwUAAEDrdKcuAAAAgK8OXA8AAO0D1wMAQPvA9QAA0D5wPQAAtA9cDwAA7QPXAwBA+8D1AADQPnA9AAC0D1wPAADtA9cDAED7wPUAANA+cD0AALQPXA8AAO0D1wMAQPvA9QAA0D5wPQAAtA9cDwAA7QPXAwBA+8D1AADQPnA9AAC0D1wPAADtA9cDAED7wPUAANA+cD0AALQPXA8AAO0D1wMAQPvA9QAA0D5wPQAAtA9cDwAA7QPXAwBA+8D1AADQPnA9AAC0D1wPAADtA9cDAED7wPUAANA+cD0AALQPXA8AAO0D1wMAQPvA9QAA0D5wPQAAtA9cDwAA7QPXAwBA+8D1AADQPnA9AAC0z/m4ftZqGjb36sdOz7Un7MZ+/WR6r8yx4jx7nZ9omFS37+im52WZdXcwm9Xox44dm23CFenFzcGVfJhUTbutlEE8vB+7ior0ulDO21WQ36nBHMrVPxpV0cIbpFesbcNZ88IfjVqpY17Oo1GlO7t+qn31Yw+ATBuuZ/1k7Jdl6cdNjxdUFbv0tqfYVVaGos8/POpurvmFiHFucWzw3dGo7eFqMIdtd+RDV7blF+INyKtQW8HBHOKQ04/y8MPrXsnRqIMx0m0K5cldL7dGHjocjSpVUCrnMKmt+MOdh5XnFiEOADInc70soC25rD70iVl6fecga+OFgAjOdfXwCb9oLOqP33T7jrme1aVYtexY76ZSG2btRryT6Ia8hQyTSq7OVRXfJAoxu1KHDUMJI8HGAyC93xRcH+zMxwm3/2BGf5Q/w4rr85PLO1TE9RWDKB9F8icBrgdfTBtxvfsqeoF3zjT+ClcUhxN2ubL3E/3ZONGrM361LJ+//a7r9o++uWFxfTIw0DBzWXrtziMeO5gDu1wFcQDzmass3bRqJbGh/CB3NEpIMtRU8PaUXa+mYZiUmvpSGGGvHqLmfuz0nI2X0u1ec311XF8Z1If7S4HrwRdz7q7PwvNS6EeCRD07B4VYVewqNj7NL1qRa/ap+SSI03pUKro+DDyfr3/8vOR5GFJfmwjyhez1vtPTMJSOdWId+jkmPdZEUBE+y2kxQak1t8M3aUUFs9HF3TX/1qLMsSou9pYPrqcjUzquHI3ad3Q80DNReRgRNxrNn7/e9cU3gHwQHdLyV9xiALY5pes3xCE+3IWHvtf7kKaPx7o+XNSWMnM5+SvFZeU3D9s/g+KFmYDU9bQ/u51DmJlXkB7bj1qPzlBrqg1svTDFJl3JSMitFJu90CAbFUwTR3GEpq7nVMX1SkWVU9cP5tCpgyJxfTzWttWt4/qVZzhet9RQUh2l1CJcD76Y84nrqyj0mVnrUQfXh16xloHxGYxSLxrmfkh7crG3E/W4s0kpI+rrYVLdaFw/nzUZpeScUjz2aNTYZ3nweJRgpXrXl+uVH7I+zFRWsCauZwyTEltpK663Z+v12Icmuh/Xb8f1vd4rM5VeFLK6SEu5KhYaALDOaV2/8qZc7nLycz/nrh/MQSl59V6vw3tD3rVYsOa/9YLzV+eFj14T1UBcT8P/eMKqdTizIcmQUM1koqL43rMqmopUie59y4TQmEJqXVvB28f1vbbFyB6P1PXa+Oq4hF46Oy24ftQqvE1uLX8svXcWUoXJgMdKLaZrsrYtvOIAcAtO7Xo5XBI7Rni3FUPO3PVl7bJ4/4sW+QnrVTpxdbyw5jK9NHsjodZgxybfpmPV+rpGtioma+TClGl2O2rTR1sVvG1cn06rptXLXG/Pr+fBHFzWi+65LFJcX6C0w+bUTnKbauJ6+ccccD34cn4urk8Xkg+T4sF4Mje7kN9J8dT5MKmsO5Ewv35uNhQsKUkSyVJy17NapCpMzlB2fVLyZc31vmoH009KDEtv5frVuL62greK69PBiVecrLk0es9cn8w3rLu+smoi1QuC44l5ukm+L3A9+HJO7fqaHE4/CpHywIRF+xJbAkhiJfFU9hstLs3ed3oyyvpRTP2T9309apoEYJ029zUbrlKDJ4UsuD4v87oU6PrCYiPUpNRq4vqaCoquF+riFs/wJLYmGTaWcx+SHI5fNzX2i+T6zQZ8ENdLT2A49st/Kgx+6Zza9RtxvdzJA0LCRArbne71xoL0wRy6bjRRiOG3qfYPMjKpafDhv78Wf/sud93SpDEd+VYXYvcjUVhsh2R2IbmWkC5ItR6W3t9TXF9ZQe96X/74Y+D4v+XhOZ6TFEaIlNVBdWMfHrZYTjEvT4sdC1yaJd58BSSzO+m/ypDer+SXw7ENy3MDANySk7l+O0+CDRu2dDtVbwUN8DNbcwkAAOAOwPUAANA+cD0AALQPXA8AAO0D1wMAQPvA9QAA0D5wPQAAtA9cDwAA7QPXAwBA+8D1AADQPnA9AAC0D1wPAADtA9cDAED7wPUAANA+cD0AALQPXA8AAO0D1wMAQPvA9QAA0D5wPQAAtA9cDwAA7QPXAwBA+8D1AADQPnA9AAC0z3m4vh87NQ2FLwdz6Lp9adM930f3y7IcjTqY0hnjqSflrjvrbuzdp0ejipfrur0yx1Bs//eshT1JAeKFttpBz7Ti8Vri7nq/voO7dKxaBf3oy8+OInWkdcnuHbtfSQnX2yFeurwJh8+629N2qzwhKdisyc3qtXuoRJKbwqsjPQZkh/UzA/BVOQvXVzmLM2vSkXwPPBo19svSa7FXR4krPSpZARsjBO3qpOvGoaLX0hlSiZewJwynrXF9jTsKzSuOT1aaifuEA9U0DJPUgGOfFptXgcrx+sYf9d23n/k1BnOoaTF7T2mj3QGub0HWhbYqhB389g2T0vMC14OTcg6uXzeLxDCpNGB0/aofOz0nakuiWhfsJ51QiOtXrxwHFTo8rHhzWZatiNXu5gtT7XqnOU5NdOwLNphDGC99ux2NKgy99j3GmkuI0F0b2mKT/875e5L60+lRUPz1TdfdXGftXOF62gJ1b3ICsybN3mseibOmWI3r3Q5wPThDTuX6jTxJIY2wLIt1Ge/V3ikHY8ZOHYSQU01D7voS5TCcHOvU1mvrel9U6djQ/9eu6bXS673us/YRyjPrbut9KBQmt9L2kCA0su6X6PrVuJ7+l9ZRSsL8+E0W2m/fo2XWHVPnXXTv3sNsJsoOZr7Rep2M1qU7mOwG14Nz5fRxfdYB1nusHIAP5qDMVIzNnemqczg1ro/ndK43Nk+tJxdsEr3KiR1Wwm5PQ2Ddk2uJ5bGyLqS/XVzMXE/Pk/6diVW4C1GLclyfNJHg+mFS6pAf9fnb77pHP7AsDsvC0SSJr/tBlcIFPS9b0zw+AghhwcEMLgEYjmVtYqvPBoBwLZq2guvBGXJq1wszh+6d2v1dkSft9BxyOC7JUBvXe6Mxc9XM6Tk/Ho0ae55TcsXO5wkKYjoatVfqQOL6ZVk2XN/rvXuVyYwbMzNZXB++qlJhclFai7G34pZGypLre30wfdrOn3941O2lfL2QnqLNkhUsbQQ+XUyeKGFUYx/aah6M4UOpbTE7BotRgtZyk2oD14PTc2LXb+RDBVbi+mM6TtCvaQweEj5lu1XE9T58i9leaXTZIBY7DFe1rveTHPlXPopMDiSDGW/hunljgh/ebJA+TErPtjVs5Cu7fuVtQMjX51M4hckJ99XqaxO9qOD68ER5y7Nhw4f/MZgIJyazHfGI/PYhrgdnwEld7wJw4u7tBYIVrhejcpbDcRGxf20PJtpyfcClnkluN+3GhVFHLnbydyILn2vKg1xfwq2ZbTGSpeVcyWVxjkbZJNW2620tXKXCbZUzP1m+XliDS4QuTxVI716L37+crep1FsK75yd/zI5GsZnbgxIyXXA9OEdOncNZFpLxmLLZNnFn2fVZJ4/pV/IJjesPpneDjTGHrjuYvs71QVj9GCxciOvXclBBiKEKxbie0Y+JiaQV7myOMVwlnTmwwTIbLazQs+oPk3K7zbob+37s9JjVLpzHDqu2kGQStcr14kKgPHgPn/g/Cr/SSJqRur4fOzVqsbKLN378ytYiHXLCdK5UTrgenBXn4PplkWUtsh7X+zcD1wNdcE0WSvIcjtutczn3zRxO8i0JAO8W19e7Pq3gSphPmijWwn7CzE6X8Ti/h5T0KrNWU28nw6W43hdy1HrfuT2zRYo0b/P5h0dkbnYwBymmTu970gjEv2T0JXsm42Li+tBobiSjQxS7ejquxFEzHYRWcmVwPTgpJ3c9m8b00i+qdt31PqubdWmWo3d/+5EgRp0VrndzDEEiflH/7fP1SUCdu55AQteCi8NyxjgFwmvhm26YlBp1kv5OZo83fOQOP5hhll0fRZxF6ESFn7/9zl8xJusH+4KVNxyN2Xmij4X8sVWFs5E2cQOkHePlmfmi9Au/4UgmFeB6cFacfH19ITvPF9HTVLsQ+Au/z+xyeWU5nIHvX7VyxsXIiURq43o2lyD+iwhiPtouoFxNzWcRMc8g8aaLheF1yYu3LPHdSxurbFLHOPXClr0fjU6W/ay9t7Hc1PYI5CsoNXVhLT9tk2xdUEoyVISbokch02iHN136Jy7CRW/zj1UAcK+cLK5fn1vDhq3V7VQ9DvzCOXkOBwAAwFcHrgcAgPaB6wEAoH3gegAAaB+4HgAA2geuBwCA9oHrAQCgfeB6AABoH7geAADaB64HAID2gesBAKB94HoAAGgfuB4AANoHrgcAgPaB6wEAoH3gegAAaB+4HgAA2geuBwCA9oHrAQCgfeB6AABoH7geAADaB64HAID2gesBAKB9Tuf6YVLdvuv2XbdX5rgsy7IcjTqYQdq5Hzs9b51x1v6EfJOPnXW31710NR2OteWhZ6Yl9AXuR+m6Y37uwRzEwpArljZ3tuwMR6NCA+bnHcViJIVfjka5fXotNwgtZ+lavY4ts3aefuz0ZFSslzGHUM3sqFl3+RWl52SYlJoG9y1vPbHMvS49GHy3L62L/PTyWgzmIFwo1guAL+KkrlfTkPSlWcuP9aydsGSbu8NDr2DdY5hUqUv3Yydd0Wsr9MZQgMRotLtmRlipS2E8o5TKTAZIV3c9ikNC2Lns7sz12ckFRQ6TKpY/Vm3Fj4M56F5o2KUkOzu8dWOfFHjd9em3/VgYn6ruhTAM+1tTW5ct19vmsocM5qDMMZYZrgf3xMldP+tu7DPL0E4lKSDpVw7So5LgN35eDvzTK3LXk/5GviJHqam3XTQrTEXA7pS6uqetrA3hZ+Iy1w6CW0tNGlXFXC87a+084ujia11w/dq1Sq4nxwqNr8yRNp0ycymur7kXeQHuoS6bcX0/dnqmI8cwTO6FBq4H98SpXR9jrkICZ5h06KixwwiuH1Lbxi6a9bS897JPWA6HJi7SuJ4EhulVWGHCh/Yq4rdJGZK43leWDlpqGtLsDS3YYDMJuV+GScV2S13vnD729vDgl5W3Ilq2hKNRBT+6AlBZH5QqqjYpyf3F9Wn751UQskDp5iOArboMJKXTdXtlJinaGPtl1t1B64M22X2H68E9cWLXG2+o0P1yZYfYmTzxt409U4+kiYg8B53E9SbJ8/je6+Ubzpz0Sa4be0Lm+vIAsxo7xxbYx1f+pPRjlBEruWwNZyvvJju8VSSakhbbbH/3/pFmYyqwSpVnRMiD4R6nve438vVCOyRD4EInMKRxxX1bXxd5YiDcJlKw8DzEZwOuB/fEiV3vUx9yJOW7aB55CeEkDeRZ365/hbfKy/L1Mr0+KHUwgy0M2Zl7fx8Uz+L69I1hK64nNerSdEFB4l4o/aTk+Unf7ORw10oxZ3WHvEcW19sGGSalDor7MUmsFSeZ+fn5fbHlXJ9YXnxbmWSUPRq114YO/8z10qB7i7r4D9mMuh41ydfzxz7MtcD14J44dQ5HElkhyqaI791yqC4mTPx+8vIeHteXAkk9hXU4yhypwUmAth302Z0T1ycFI5W14a06rExvZA21L8w/+0P4WxHJS1SsHhHgYXLI101kXAxlntgUpXRFlo6js5oHM3hZ+7xWMfwPU/FUoOHDOFF/NIquqOHRtzLHpbouvd5rPXZ6Zs8kmdSNd4oPkPbuwPXgPji566MNw2oEZY5RkfTlPT70m5F+DM3WZvyKrt/Tfs7m2YjQ8+469tnannJozPI8WzmctQWUrqYdGxVqh4RlXeKkBapSFnbk66hP4/Q4z3v4MVJM/S/x8ziE+AlMOgMvOLF0QnpRcWqBz7IK96KyLvZhiEMUnXfJDlTCLEshhwnArTkH1/t3Vb/qhi4/CBnklKwbb6bs3TvEVkYi6YTZEgu6IMfYKJJPA0qlXRZx+jft1WztUGnykJyHvcrEmQ8X+4t2YKuVNpoiv1AWOLORgw5Ifl6EvFoJfrQSN6XXLzd2Zusj2ZiazM0KK3TFRFP5ZWhtTE13W6vLYEb38ws6JqUjVih8H9Zc6jH+9ESPiOvBvXAGv6VSiTTFTMgSp8Islb0xOaGHr3XLfo4UtJL2xiSmy07FayTg/F5e9u4HtvV133HlfmlC2xVmy/X2f/N1UPxNqB+7mt+7LcWhLvkJBct7hBG90GhSCu5oVNbI9NcVXTpCF4tacL1fAekDfxaM374uoc2T9qGZKLf8Cb+lAl+P08f1S9qfkxjQB/5ZXFbv+vQlnXk2io/oI8nbZgu6+W9W6fRaElmLPwHNJu6yVgmxdrmHRymEOU95eWVNDicb2Hhey+aRZ81fesSSi1+x2UseC/fa/UBBylCxHItrQ/lHXvE10f7adhIfEv/eQ/JL/CUmzqV3eiKun7LC1NXFNSkbwvG7WfCgnIXrl2UhPuVZbLoQrTYBTU2XZPnDymjBuTaLEn6+2HX7To1apUVys6N0MBB/x2/lmPyAPltLE8oQl13H8+Q/ke1rfwsmNS8pf/WPvJjdSoe4XzPlwaxwg5gf0wnJ/LUgyXiIqZhYMFsMuq6JtUzYTTqFXz5r/PC51jL0vaGiLtlvL8ThHK4HX5WTuX5bNNiwYSPbqboqaAP8O5cAANA+cD0AALQPXA8AAO0D1wMAQPvA9QAA0D5wPQAAtA9cDwAA7QPXAwBA+8D1AADQPnA9AAC0D1wPAADtA9cDAED7wPUAANA+cD0AALQPXA8AAO0D1wMAQPvA9QAA0D5wPQAAtA9cDwAA7QPXAwBA+8D1AADQPnD9A7EDANyVU3ffFoDrH4jdbnf8/hM2bNhuu8H198LJXN/rfddtbXqmhwzmwD6pPuHBDDUXdbstw6S6sV+WZZl1cTf6VTy/7uXiwfXYsN1tg+vvhbOI63tNJKumQd7raFTRpEWGSZExY8XFSTEWqvvSbrN2RT0adTDDsvRjOiQkh8P12LDdbYPr74Uzcv38x/Px6c2/+4c3/+O3P7EdfvrtT//3P9yU5Fs+79h1idyZ67P/DQH72oUKrp81GVTIK4gL/+F6bNjutsH198IJXc/TI3/yB+Pv/s5086sbu/3nf3DzV//m5t//9cPf/2uH//S3p5tf3fzJH4xy7kV6FRjMocuUfUvX8xLancluMYej9UGZozthP+ZFguuxYbvbBtffC6d1vVWqz4Esy//7r9N/+8OboHu2/e8/vPn9f/99drhEIRfU673uxRT8Xpmj5Pp4iTAwJHE9v5A9uVAwuB4btrttcP29cA6uJ0rtx07PP776saT7m3/kdT9MKszT2qT81hbjbkccY9zFb+d6f+noepfGsTPAureXcFd3rv9w9cQvI3vy8v3x+0/H79+/unj86oP0lL99trt8vdUTXl+W1qnJx76+3O0u3wqnehdPZMtDz0xL6Av89pl01WfvsjN/fPlYLMy7YtH52bIzvH91ERpQajepGGlrv3914fZ5dyk3CC1n6VrvLmPLrJ3n7bPd5dWri1ivVy8fxxvFj3p9ucuvKD0nH66eXFx99A3CEMv87rL0YPDdvrQu8tPLa/Hx5WPhQrFen45w/T1xBq4n06e9dgmZn3578z//nqz773/9/TJuzLKuxvV+F3OgmZnl1q6fdTf2yTBDw/mjUck6ol1w/cXVx6Qvvb4kj3Xa4a2MZJu7w0OvSLvH8cPVk1KXfvtsJ13Rayv0xlCAxGi0u2ZGWKlLYTxjPVwsMxkgXd0v2TBDzP7h6klhMEsL712fnVxQ5IerJ8Xyx6qt+PHjy8eXb4WGLcrODm+7Z++SAq+7Pv327bPC+FR1L4Rh2N+a2rpsud42lz3k48vHT16+j2WG678Cp3e9dajProx9P3bd2C/zv/yj6X/9i6Os+38y/a0/Ki3XWZZl0/U200LT7rYkd3J9nKFdWzCauv715e7Zu8wytFNJCkj6Vd6jkuA3fl4O/NMrcteT/ka+IkddXL2zXTQrTEXA7pS6uqetrA3hXxOXuXYQ3Fpq0l1QFXO97Ky18yRlS4aosuvXrlVyvTQ4Ja1Hm+7Jy9eluL7mXuQFuIe6bMb1b5/tLl/TkePjhyv3QgPXfwVO7frUlS7E7sdOj1pNn4ff3/xdObr/8M+Pa+decb1JVmGGzzs9335ulpWf5Hb6MbnEMO2o62PMVUjgfLi6DB01dhjB9R9T28YumvW0vPeyT1gOhyYu0rieBIbpVVhhWP8Xv03KkMT1vrJ00Lq4+phmb2jBPtpMQu6XD1dPYrulrndOf/bOHh78svJWVBp0v3//6qLgR1cAKuvHTy6Kqk1Kcn9xfdr+eRWELFCKjwC26vKRpHR2u92Tl1fScPPs3fevL3ePLy8fX77M7jtc/xU4+TocFzgP5qDMMflWTX/1b/9PMXH/q5vjvyrrviKHk7Me18u7VbjeJqao6195Q4XulyvbkaREbht7ph5JExF5DjqJ618meR7fe718w5mTPsl1Y0/IXF8eYEQd5JLdxVd++tXbZ1FGrORyWsnZyrvJDm8ViabvKwsfq/DucpdmYyo2q1R5RoQ8GO5x2l2+3cjXC+2QDIGf6ASGNK64b+vrIk8MhNtEChaeh/hswPVfgVPH9aUvh0mpaf/H8/yP5x+e/PDDP7158ze/+9d/47v/+OzHn/78p5/+/Kf/8s8Odrp15XDR9RW/m11fXx+cPutuNDHpL+Zwjka5Qu6I633qQ46kfBfNIy8hnKSBPOvb9a/wVnlZvr7Uhx8/uXj86oMtDNmZe38XFM/i+vSNYSuuT8abJF1QkLgXyturJ/L8pG92crhrpZizqmqx/LTJh7ZBPlw9uXj8hPsxSawVJ5n5+fl9seVcn1gObfUqGWXfv7rYXb6kwz9zPa2r//wWdfEfshn1y2eXJF/PH/sw1wLXfwXOzvVRx3qOWZTCj2mzRfQx6yLG77eM6/NrxcLYcpLBZjWHI+br095YiLLXXZ/0f+pQMWESVSiviknjekYIJC+vwjqcJy/fU4OTAG076LM7J65PCkYqa8Pbi8dPZOnmdXl9udsV5p/9IfytiOQlKlaPCBsPk0O+7oqMi6HMV2yKUroiS8fRWc3Hrz54Wfu8lszF1ccwFU8FGj6ME/XvX13QFTU8+n7y8v2xui7vLneXl892l6/ZM0kmdeOd4gOkvTtw/X1zMtdv/2M4bW07vg6Hr0Z48vJ9VCR9eY8P/WakH0OztRm/out3tJ+zeTYi9Ly7PnuXre0ph8Ysz1PabUdSRqUFlK6mOzYqiMj59zWJkxaoSlnYkW9HfRqnx3new4+RYuqf3Nk4hPgJTDoDzxZfyQ9Jpmx5aoHPsgr3orIu9mGIQxSdd8kOvBBmWVgOE66/F87i30j4JZC53r+r+lU3dPlByCCv9EZ3thVVuq5SuQ4nnwMkugnJjZc2iuTTgFJp40iW9OG0V7O1Q6XJQ3Ie9ioTZz52u93u4nHmPqbd3GKlIYFeKAuc2chBByQ/L0JerQQ/Wom/Kr1+ubEzWx/JxtRkblZYoSsmmoTybw0S2W5rdfn48pn7+QUdk9IRKxT+XVhzefksPMxPLp8hrr934PoHYsd+S3WRSFPMhPgAh4VUm70xOaFgrhhh7VK3Zvl6skxFPhWvkaz7kDMpLyS3EwArsXNcuV+a0E7dV3R9OqgktyAp3ttnu5rfu31fHOqSn1CwvEcY0QuNJqXg3r+6yBqZ/rpil47QxaIWXO9XQPrAnwXjt69LaPOkfWgmyi1/wm+pHga4/oHYpXE9689JDOgD/ywuq3d9+pLOPBvFR/SR5G2zBd38N6t0ei2JrMWfgAZKUwgx1i5Nt1IphDlPeXnlZsD+SRjYeF7L5pFfX+52eeYhK7n4FZu95LHwu0v3AwUpQ8VyLK4N5R95xddE+2vbK/Eh8e89JL/EX2LiXPru8oq4/iorTF1dXJOyIRy/mz0ZcP0Dkbs+2na3y7PYdCFahbwy0yVZ/rAyWnCuzaKEny/udrvdxbPLi7RIbnaUDgbi7/itHJMf0GdraUIZ4rLreJ78J7Jva38LJjUvH96qViWldisd4n7NlAezeam4H9MJyfy1IMl42EYQhhlbMFsMuq6JtUzYTRhBw/LZl374XGsX+t5QUZfstxfuNGmLwfUPBlz/QOzwb59hw3anDa6/F+D6BwKux4btbhtcfy/A9Q8EXI8N2902uP5egOsfCLgeG7a7bXD9vQDXPxBwPTZsd9vg+nsBrn8g4Hps2O62wfX3Alz/QMD12LDdbYPr7wW4/oHYXNUNAChx6u7bAnA9AAC0D1wPAADtA9cDAED7wPUAANA+cD0AALQPXA8AAO1zMtf/GgAAwENxMtf/JQAAgIcCORwAAGgfuB4AANoHrgcAgPaB6wEAoH3gegAAaB+4HgAA2geuBwCA9oHrAQCgfeB6AABoH7geAADaB64HAID2OZnrr1883ebFmzfPK/a6Xj69ef70xXkquC4AABFsSURBVHU8dfg7/ch/8+nN8+dvPrkv3F+ET8lV3YGR/ABywmJtbZGSK/NSJl/mlSycSDrXpzfP2cmFy30psQif8tvkCyd8Je0GAPi6nEtcLzpX3K1krOsXQYhkt+sXz998Kro+F5H/2BcmHEjcJQ4OcumrRrRwKDtNrEVQN3E42Tk3e/7Jagv/7v1vnv7ZX9R8KNc6q39sLwDAWfCzcv1W9Jy5+/mbNyuu//TmuX1zEOJrFlGLcf16yJqcdCuuZ2MCe/mg5Y5l+PTm+fM317wM6ZhQKuKL622/r7qeFlgoBQJ2AM6Ms3f9Rg7gaTHOt7pbievfeNlab5HLF+L6T58+8XC6ZDQhrq6AnpBmpcLn1y+Es7JrJQ1GK81O+2WuT4uLuB6Ac+ecXP/8uaBuGgjnyQ7nuTBSRO+5XVLXb5WgNNrEhA/dpcb1m0MVPWWaAKfvEzzjlMjb1vMpEz753/B/ca+/+DN3pt+8/13Quvjhku5P7B9HzFK+viqFde/zCACAnDNy/dMX104OzFrifCV3u0/Xe50FyTPXl/VTOZsY/VSTw+Hjgfz/vFCl5P+L63SmIbdsmuAvV/bFtRjCy3F9+tdv3v+OtOQtRb2ZhgMAfBXOyPWpa/MpyJW4nhLS2Knys4UswlHS8pqnT52LbzEjy8q1Miaw49PkUUHi4oxsHtc/TSd9s/LXu54H+L95/zs/1fH8zaeV6oVLJrPMPh2FeB6AB+QMXZ/+f21cn/okeGbN9Sw9LqwfZBkbdvXauVn5OtLfievJxa+zRInd+cV1FrnbTNjTsBK1aOHbuZ7iA3thrBMNTgclYcIZAPAAnKvrA7VxPRUPWX655vrrF1Hnibfq1+HUxvU1rqdyfnGdu54fsxHXSyMa/Z87xvVpJWPr0WnuZLRLWyn5P9gegAejGdfHb69fPH3+4kUph0Ov6LMQ9GIuEV+zvv4+XW+zRNeVOZxPb95cV7o+nMe+GMQC09R7ovXsQyp76n16F54WMjMb8xWwPQAPxM/B9aUsCZXgNV1A6SdOCyqMEwLcRE7p9XH9Zrncfnmuhhv86YsXfOmnhDsyZHQKpuTzGLGoqeyf2oU1qdazDxe+biet1/WLpzaZRNax5jUvfILVmQA8CD8H16/I4FP8zVCYJpSSF0FHTKdc13yO4F7i+u3qhNOvDR9+BHNLLAtTBv6flXB7ZYZPZ77vTPhNAr1xhXeRtGJQOwCn4Fxc/4VYJcv/xEzmHQAA+KXRiOsBAACsANcDAED7wPUAANA+cD0AALQPXA8AAO0D1wMAQPvA9QAA0D5wPQAAtA9cDwAA7QPXAwBA+8D1AADQPnA9AAC0z8lc/2sAAAAPxclc/5cAAAAeCuRwAACgfeB6AABoH7geAADaB64HAID2gesBAKB94HoAAGgfuB4AANoHrgcAgPaB6wEAoH3gegAAaB+4HgAA2geuBwCA9oHrAQCgfeB6AABoH7geAADaB64HAID2gesBAKB9zsf1s1bTsLlXP3Z6rj1hN/brJ9N7ZY4V59nr/ETDpLp9Rzc9L8usu4PZrEY/duzYbBOuSC9uDq7kw6Rq2m2lDOLh/dhVVKTXhXLeroL8Tg3mUK7+0aiKFt4gvWJtG86aF/5o1Eod83IejSrd2fVT7asfewBk2nA96ydjvyxLP256vKCq2KW3PcWusjIUff7hUXdzzS9EjHOLY4PvjkZtD1eDOWy7Ix+6si2/EG9AXoXaCg7mEIecfpSHH173So5GHYyRblMoT+56uTXy0OFoVKmCUjmHSW3FH+48rDy3CHEAkDmZ62UBbcll9aFPzNLrOwdZGy8ERHCuq4dP+EVjUX/8ptt3zPWsLsWqZcd6N5XaMGs34p1EN+QtZJhUcnWuqvgmUYjZlTpsGEoYCTYeAOn9puD6YGc+Trj9BzP6o/wZVlyfn1zeoSKurxhE+SiSPwlwPfhi2ojr3VfRC7xzpvFXuKI4nLDLlb2f6M/GiV6d8atl+fztd123f/TNDYvrk4GBhpnL0mt3HvHYwRzY5SqIA5jPXGXpplUriQ3lB7mjUUKSoaaCt6fsejUNw6TU1JfCCHv1EDX3Y6fnbLyUbvea66vj+sqgPtxfClwPvphzd30WnpdCPxIk6tk5KMSqYlex8Wl+0Ypcs0/NJ0Gc1qNS0fVh4Pl8/ePnJc/DkPraRJAvZK/3nZ6GoXSsE+vQzzHpsSaCivBZTosJSq25Hb5JKyqYjS7urvm3FmWOVXGxt3xwPR2Z0nHlaNS+o+OBnonKw4i40Wj+/PWuL74B5IPokJa/4hYDsM0pXb8hDvHhLjz0vd6HNH081vXhoraUmcvJXykuK7952P4ZFC/MBKSup/3Z7RzCzLyC9Nh+1Hp0hlpTbWDrhSk26UpGQm6l2OyFBtmoYJo4iiM0dT2nKq5XKqqcun4wh04dFInr47G2rW4d1688w/G6pYaS6iilFuF68MWcT1xfRaHPzFqPOrg+9Iq1DIzPYJR60TD3Q9qTi72dqMedTUoZUV8Pk+pG4/r5rMkoJeeU4rFHo8Y+y4PHowQr1bu+XK/8kPVhprKCNXE9Y5iU2Epbcb09W6/HPjTR/bh+O67v9V6ZqfSikNVFWspVsdAAgHVO6/qVN+Vyl5Of+zl3/WAOSsmr93od3hvyrsWCNf+tF5y/Oi989JqoBuJ6Gv7HE1atw5kNSYaEaiYTFcX3nlXRVKRKdO9bJoTGFFLr2grePq7vtS1G9nikrtfGV8cl9NLZacH1o1bhbXJr+WPpvbOQKkwGPFZqMV2TtW3hFQeAW3Bq18vhktgxwrutGHLmri9rl8X7X7TIT1iv0omr44U1l+ml2RsJtQY7Nvk2HavW1zWyVTFZIxemTLPbUZs+2qrgbeP6dFo1rV7ment+PQ/m4LJedM9lkeL6AqUdNqd2kttUE9fLP+aA68GX83NxfbqQfJgUD8aTudmF/E6Kp86HSWXdiYT59XOzoWBJSZJIlpK7ntUiVWFyhrLrk5Iva673VTuYflJiWHor16/G9bUVvFVcnw5OvOJkzaXRe+b6ZL5h3fWVVROpXhAcT8zTTfJ9gevBl3Nq19fkcPpRiJQHJizal9gSQBIriaey32hxafa+05NR1o9i6p+87+tR0yQA67S5r9lwlRo8KWTB9XmZ16VA1xcWG6EmpVYT19dUUHS9UBe3eIYnsTXJsLGc+5DkcPy6qbFfJNdvNuCDuF56AsOxX/5TYfBL59Su34jr5U4eEBImUtjudK83FqQP5tB1o4lCDL9NtX+QkUlNgw///bX423e565YmjenIt7oQux+JwmI7JLMLybWEdEGq9bD0/p7i+soKetf78scfA8f/LQ/P8ZykMEKkrA6qG/vwsMVyinl5WuxY4NIs8eYrIJndSf9VhvR+Jb8cjm1YnhsA4JaczPXbeRJs2LCl26l6K2iAn9maSwAAAHcArgcAgPaB6wEAoH3gegAAaB+4HgAA2geuBwCA9oHrAQCgfeB6AABoH7geAADaB64HAID2gesBAKB94HoAAGgfuB4AANoHrgcAgPaB6wEAoH3gegAAaB+4HgAA2geuBwCA9oHrAQCgfeB6AABoH7geAADaB64HAID2gesBAKB94HoAAGgfuB4AANoHrgcAgPaB6wEAoH3gegAAaB+4HgAA2geuBwCA9oHrAQCgfeB6AABoH7geAADaB64HAID2gesBAKB94HoAAGif83B9P3ZqGgpfDubQdfvSpnu+j+6XZTkadTClM8ZTT8pdd9bd2LtPj0YVL9d1e2WOodj+71kLe5ICxAtttYOeacXjtcTd9X59B3fpWLUK+tGXnx1F6kjrkt07dr+SEq63Q7x0eRMOn3W3p+1WeUJSsFmTm9Vr91CJJDeFV0d6DMgO62cG4KtyFq6vchZn1qQj+R54NGrsl6XXYq+OEld6VLICNkYI2tVJ141DRa+lM6QSL2FPGE5b4/oadxSaVxyfrDQT9wkHqmkYJqkBxz4tNq8CleP1jT/qu28/82sM5lDTYvae0ka7A1zfgqwLbVUIO/jtGyal5wWuByflHFy/bhaJYVJpwOj6VT92ek7UlkS1LthPOqEQ169eOQ4qdHhY8eayLFsRq93NF6ba9U5znJro2BdsMIcwXvp2OxpVGHrte4w1lxChuza0xSb/nfP3JPWn06Og+Oubrru5ztq5wvW0Bere5ARmTZq91zwSZ02xGte7HeB6cIacyvUbeZJCGmFZFusy3qu9Uw7GjJ06CCGnmobc9SXKYTg51qmt19b1vqjSsaH/r13Ta6XXe91n7SOUZ9bd1vtQKExupe0hQWhk3S/R9atxPf0vraOUhPnxmyy0375Hy6w7ps676N69h9lMlB3MfKP1OhmtS3cw2Q2uB+fK6eP6rAOs91g5AB/MQZmpGJs701XncGpcH8/pXG9snlpPLtgkepUTO6yE3Z6GwLon1xLLY2VdSH+7uJi5np4n/TsTq3AXohbluD5pIsH1w6TUIT/q87ffdY9+YFkcloWjSRJf94MqhQt6XrameXwEEMKCgxlcAjAcy9rEVp8NAOFaNG0F14Mz5NSuF2YO3Tu1+7siT9rpOeRwXJKhNq73RmPmqpnTc348GjX2PKfkip3PExTEdDRqr9SBxPXLsmy4vtd79yqTGTdmZrK4PnxVpcLkorQWY2/FLY2UJdf3+mD6tJ0///Co20v5eiE9RZslK1jaCHy6mDxRwqjGPrTVPBjDh1LbYnYMFqMEreUm1QauB6fnxK7fyIcKrMT1x3ScoF/TGDwkfMp2q4jrffgWs73S6LJBLHYYrmpd7yc58q98FJkcSAYz3sJ188YEP7zZIH2YlJ5ta9jIV3b9ytuAkK/Pp3AKkxPuq9XXJnpRwfXhifKWZ8OGD/9jMBFOTGY74hH57UNcD86Ak7reBeDE3dsLBCtcL0blLIfjImL/2h5MtOX6gEs9k9xu2o0Lo45c7OTvRBY+15QHub6EWzPbYiRLy7mSy+IcjbJJqm3X21q4SoXbKmd+sny9sAaXCF2eKpDevRa/fzlb1esshHfPT/6YHY1iM7cHJWS64Hpwjpw6h7MsJOMxZbNt4s6y67NOHtOv5BMa1x9M7wYbYw5ddzB9neuDsPoxWLgQ16/loIIQQxWKcT2jHxMTSSvc2RxjuEo6c2CDZTZaWKFn1R8m5XabdTf2/djpMatdOI8dVm0hySRqlevFhUB58B4+8X8UfqWRNCN1fT92atRiZRdv/PiVrUU65ITpXKmccD04K87B9csiy1pkPa73bwauB7rgmiyU5Dkct1vncu6bOZzkWxIA3i2ur3d9WsGVMJ80UayF/YSZnS7jcX4PKelVZq2m3k6GS3G9L+So9b5ze2aLFGne5vMPj8jc7GAOUkyd3vekEYh/yehL9kzGxcT1odHcSEaHKHb1dFyJo2Y6CK3kyuB6cFJO7no2jemlX1Ttuut9Vjfr0ixH7/72I0GMOitc7+YYgkT8ov7b5+uTgDp3PYGErgUXh+WMcQqE18I33TApNeok/Z3MHm/4yB1+MMMsuz6KOIvQiQo/f/udv2JM1g/2BStvOBqz80QfC/ljqwpnI23iBkg7xssz80XpF37DkUwqwPXgrDj5+vpCdp4voqepdiHwF36f2eXyynI4A9+/auWMi5ETidTG9WwuQfwXEcR8tF1AuZqazyJinkHiTRcLw+uSF29Z4ruXNlbZpI5x6oUtez8anSz7WXtvY7mp7RHIV1Bq6sJaftom2bqglGSoCDdFj0Km0Q5vuvRPXISL3uYfqwDgXjlZXL8+t4YNW6vbqXoc+IVz8hwOAACArw5cDwAA7QPXAwBA+8D1AADQPnA9AAC0D1wPAADtA9cDAED7wPUAANA+cD0AALQPXA8AAO0D1wMAQPvA9QAA0D5wPQAAtA9cDwAA7QPXAwBA+8D1AADQPnA9AAC0D1wPAADtA9cDAED7/H+MTMUaq1fOrAAAAABJRU5ErkJggg==" alt="" width="309" height="197" />
彩色点代表鼠标指针.
此时,鼠标滑入和滑出已经没有问题.当鼠标在超链接上面移动, 提示效果并不会随着鼠标移动. 还需要添加一个mousemove事件.
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{margin:0;padding:40px;background-color:#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-color:#F7F5D1;padding:1px;color:#333;display:none;}
</style>
</head>
<body>
<p><a href="#" class="tooltip" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a></p>
<p><a href="#" class="tooltip" title="女子隐瞒已婚与他人恋爱 骗财3万余元终获刑">女子隐瞒已婚与他人恋爱 骗财3万余元终获刑</a></p>
<p><a href="#" class="tooltip" title="陈红母亲股权变更签名鉴定为假 涉提交虚假材料">陈红母亲股权变更签名鉴定为假 涉提交虚假材料</a></p>
<p><a href="#" class="tooltip" title="两女子因问路未获回应围殴保洁员(图)">两女子因问路未获回应围殴保洁员(图)</a></p>
<hr>下面浏览器自带超链接title提示<hr>
<p><a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a><p>
<p><a href="#" title="女子隐瞒已婚与他人恋爱 骗财3万余元终获刑">女子隐瞒已婚与他人恋爱 骗财3万余元终获刑</a><p>
<script type="text/javascript" src="js/jquery-1-8-3.js"></script>
<script type="text/javascript">
(function($){
//自制提示和鼠标距离太近,有时候会引起无法提示的问题,需要重新设置提示元素的 top 和 left 值.
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
//显示title
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>";//创建<div>元素
$("body").append(tooltip);//把div追加到文档中
$("#tooltip")
.css({
"top": ( e.pageY + y ) + "px",
"left": ( e.pageX + x ) + "px" //设置x坐标和y坐标, 并且显示
}).show("fast"); }).mouseout(function() {
//隐藏title
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip").css({
"top": ( e.pageY + y ) + "px",
"left": ( e.pageX + x ) + "px"
});
});
})(jQuery);
</script>
</body>
</html>
超链接提示效果jQuery+CSS+html的更多相关文章
- [锋利的JQ]-超链接提示效果
关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...
- jQuery超链接提示，提示跟随鼠标动
功能:实现鼠标移动到一个超链接时,鼠标右下角产生一个提示,并跟谁鼠标移动,知道鼠标离开超链接. 效果: 源码: <!--本案例是鼠标放在超链接上时,鼠标旁边有提示这是个超练级,以及放在图片上时图 ...
- BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- jQuery——超链接提示
在熟悉jQuery过程中,练习超链接提示显示,发现书本上有个问题,经过查询资料,修改如下: <!DOCTYPE html> <html> <head> <ti ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- 炫！一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- jquery+css实现菜单收缩效果并适应多种浏览器与移动平台
效果 出现 css部分 .content-wrapper{ -webkit-transition: -webkit-transform .3s ease-in-out, margin .3s ease ...
- 基于jQuery Tooltips悬停提示效果
基于jQuery Tooltips悬停提示效果.这是一款基于jquery.tooltipster插件实现的jQuery Tooltips Hover effect特效.效果图如下: 在线预览 源码 ...
- JS/CSS 各种操作信息提示效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 微信小程序点击按钮，修改状态
WXML中: <view wx:if="{{orderstate}} = '待送检' " data-no="{{orderstate}}" bindtap ...
- Android开发——支付宝和微信支付快速接入流程
一.Android快速实现支付宝支付 1.首先,我们需要前往支付宝开放平台,申请我们的支付功能:https://open.alipay.com/platform/home.htm 支付宝首页 这里 有 ...
- 系统分析与设计——WordCount
成果: https://gitee.com/ZMLJZ/codes/0k19q4upgmrfde265l7vx36 作业要求: 根据WordCount的需求描述,先编程实现,再编写单元测试,最后撰写博 ...
- day9 匿名函数 lambda
1. list列表排序 #### sort排序 nums = [,,,,,] nums.sort() print(nums) ### 结果 [, , , , , ] ######## 逆序 In [] ...
- OpenStack入门篇（四）之KVM虚拟机介绍和管理
1.查看虚拟机,启动虚拟机 [root@linux-node1 ~]# virsh list --all Id Name State --------------------------------- ...
- Entity Framework for Oracle 基本配置
1.需要安装ODAC 如果不安装ODAC,在数据源连接的配置中,看不到Oracle的选项 我下载安装的组件是32-bit Oracle Data Access Components (ODAC) w ...
- tensorflow中tensor与数组之间的转换
# 主要是两个方法: # 1.数组转tensor:数组a, tensor_a=tf.convert_to_tensor(a) # 2.tensor转数组:tensor b, array_b=b.eva ...
- Google TensorFlow for GPU安装、配置大坑
Google TensorFlow for GPU安装.配置大坑 从本周一开始(12.05),共4天半的时间,终于折腾好Google TensorFlow for GPU版本,其间跳坑无数,摔得遍体鳞 ...
- python爬取淘宝华为手机
import re from selenium import webdriver from selenium.common.exceptions import TimeoutException fro ...
- Ubuntu—安装python的第三方包gevent
今晚花很多时间, 使用 sudo pip3 install gevent 但是始终没有成功. 柳暗花明又一村 sudo apt-get install python3-gevent 搞定!!! 人生如 ...