超级链接悬浮提示跟随鼠标 jQuery Tooltip

发布时间：2018-08-22 13:11 所属栏目：121 来源：站长网

导读：以后的网页特效可能真的离不开 jQuery 了，今天介绍的也是jQuery的实例，jQuery Tooltip 示例演示，一款链接信息提示效果，当鼠标放到链接上时，会有悬浮的层提示效果，鼠标移动时悬浮层也跟随移动，很不错的功能，欢迎朋友们研究研究。网页演示：点击这

　　以后的网页特效可能真的离不开jQuery了，今天介绍的也是jQuery的实例，jQuery Tooltip 示例演示，一款链接信息提示效果，当鼠标放到链接上时，会有悬浮的层提示效果，鼠标移动时悬浮层也跟随移动，很不错的功能，欢迎朋友们研究研究。

　　网页演示：点击这里

　　运行演示：

<html> <head> <meta charset="gbk"> <title>jQuery Tooltip Example by Liehuo.net</title> <style type="text/css"> body {font-size: 85%; font-family: helvetica, verdana, arial, sans-serif;} h1 {font-size: 1.3em;} h2 {font-size: 1.2em;} table { width: 70%; border-collapse: collapse;} th {text-align: left;} code {font-size: 1.1em;} td { border: 1px solid #ccc; border-width: 1px 0; padding: 3px 6px;} #livetip { position: absolute; background-color: #cfc; padding: 4px; border: 2px solid #9c9; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } </style> </script> </head> <body> <h1>Event Delegation Tooltip, with DRY script!</h1> <table id="mytable"> <thead> <tr> <th>row number</th> <th>link with tooltip</th> </tr> </thead> <tbody> <tr id="row1"><td>row 1</td><td><a title="this is a link to row 2000" href="#row2000"><strong>row 2000</strong></a></td></tr> <tr id="row2"><td>row 2</td><td><a title="this is a link to row 1999" href="#row1999">row 1999</a></td></tr> <tr id="row3"><td>row 3</td><td><a title="this is a link to row 1998" href="#row1998">row 1998</a></td></tr> <tr id="row4"><td>row 4</td><td><a title="this is a link to row 1997" href="#row1997">row 1997</a></td></tr> <tr id="row5"><td>row 5</td><td><a title="this is a link to row 1996" href="#row1996">row 1996</a></td></tr> <tr id="row6"><td>row 6</td><td><a title="this is a link to row 1995" href="#row1995">row 1995</a></td></tr> </tbody> </table> <script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></script> <script type="text/javascript"> jQuery(function($) { var $liveTip = $('<div id="livetip"></div>').hide().appendTo('body'); var tipTitle = ''; $('#mytable').bind('mouseover mouseout mousemove', function(event) { var $link = $(event.target).closest('a'); if (!$link.length) { return; } var link = $link[0]; if (event.type == 'mouseover' || event.type == 'mousemove') { $liveTip.css({ top: event.pageY + 12, left: event.pageX + 12 }); }; if (event.type == 'mouseover') { tipTitle = link.title; link.title = ''; $liveTip.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>') .show(); }; if (event.type == 'mouseout') { $liveTip.hide(); if (tipTitle) { link.title = tipTitle; }; }; }); }); </script> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）

超级链接悬浮提示 跟随鼠标 jQuery Tooltip

超级链接悬浮提示跟随鼠标 jQuery Tooltip