功能：实现鼠标移动到一个超链接时，鼠标右下角产生一个提示，并跟谁鼠标移动，知道鼠标离开超链接。

效果：

源码：

 <!--本案例是鼠标放在超链接上时，鼠标旁边有提示这是个超练级，以及放在图片上时图片效果放大预览-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>文字超链接提示和图片提示效果</title>

     <script src="../js/jquery.js" type="text/javascript"></script>

     <style type="text/css">

         body{

             margin: 0;

             padding: 40px;

             background: #fff;

             font: 80% Arial, Helvetica, sans-setif;

             color: #555;

             line-height: 180%;

         }

         p{

             clear:both;

             margin:0;

             padding:.5em 0;

         }

         /*tooltip*/

         #tooltip{

             position: absolute;

             border: 1px solid #333;

             background: #f7f5d1;

             padding: 1px;

             color: #333;

             display: none;

         }

     </style>

     <script type="text/javascript">

         $(function(){

             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);    //把它追加到文档中

                 $("#tooltip") //追加样式

                         .css({

                             "top": (e.pageY + y) + "px",

                             "left": (e.pageX  + x) + "px"

                         }).show("fast");

             }).mouseout(function () {

                //鼠标移开时不显示title

                this.title=this.myTitle;

                $("#tooltip").remove();

            }).mousemove(function(e){

                //鼠标移动时，title跟谁鼠标

                 $("#tooltip")

                         .css({

                             "top": (e.pageY+y) + "px",

                             "left": (e.pageX+x)  + "px"

                         });

             });

        })

     </script>

 </head>

 <body>

 <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>

 <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>

 <p><a href="#" title="这是自带提示1.">自带提示1.</a></p>

 <p><a href="#" title="这是自带提示2.">自带提示2.</a></p>

 </body>

 </html>

jQuery超链接提示，提示跟随鼠标动的更多相关文章

  1. jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

    一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...

  2. JQuery实现一个简单的鼠标跟随提示效果

    效果体验:http://hovertree.com/texiao/jsstudy/2/ 实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建 ...

  3. jQuery打造智能提示插件二（可编辑下拉框）

    在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...

  4. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  5. 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效

    今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...

  6. jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]

    jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...

  7. jQuery背景跟随鼠标移动的网页导航

    首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search     首页 PSD模板 CSS模板 特效插件 ...

  8. jquery的智能提示控件

    福利到~分享一个基于jquery的智能提示控件intellSeach.js   一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...

  9. Visual Studio 2012设置Jquery/Javascript智能提示

    Visual Studio 2012设置Jquery/Javascript智能提示 在Visual Studio 2008 Visual Studio 2010中微软已经开始支持jquery/java ...

随机推荐

  1. 【工匠大道】一些Vim(Linux)不常见但很逼格的命令(不断更新中)

    本文地址 分享提纲: 1. :Tlist 2. :colorscheme 3. :set cursorline 4. ma 5. vim -x 6. CTRL-] 7. 折叠 8. 向别的用户终端写信 ...

  2. ABP导航源码分析

    按步骤看: 1,在Global.asax中执行: base.Application_Start(sender, e); 2,在AbpWebApplication类的Application_Start( ...

  3. Linq的分页与组合查询的配合使用

    1.首先使用Linq连接数据库,并扩展属性 public partial class User { public string SexStr { get { string end = "&l ...

  4. 浅入浅出dubbo

    1. Dubbo是什么? 只是一个框架 Hibernate是持久层框架,SpringMVC是MVC的框架,而Dubbo是分布式服务框架. 是框架而不是服务 所以不是像Tomcat或Memcached可 ...

  5. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  6. 原生JS实战：分享一个首页进度加载动画！

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...

  7. arcgis10.2.2桌面版具体的安装步骤过程

    先声明一下,这里的截图虽说是ArcGIS10.1版本的,但是安装步骤是对的,本人用ArcGIS10.2.2软件测试成功安装上 一.ArcGIS许可证管理器安装 1.在软件包文件夹license man ...

  8. 关于如何在Android、Java等非微软平台上建立高信任的SharePoint应用程序

    关于如何在非微软平台上建立高信任的SharePoint应用程序 原文 :http://blogs.msdn.com/b/kaevans/archive/2014/07/14/high-trust-sh ...

  9. 源码安装ipython，并在ipython中整合spark

    一.安装ipython 下载ipython, https://pypi.python.org/packages/source/i/ipython/ipython-2.2.0.tar.gz#md5=b9 ...

  10. Android入门开发时注意的两个问题

    android开发中的问题: . 开发应用时要访问网络往往会忘记添加网络权限 <uses-permission android:name="android.permission.INT ...