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

效果：

源码：

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

 <!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. java集合-补充HashMapJDK1.8

    在Java 8 之前,HashMap和其他基于map的类都是通过链地址法解决冲突,它们使用单向链表来存储相同索引值的元素.在最坏的情况下,这种方式会将HashMap的get方法的性能从O(1)降低到O ...

  2. [deviceone开发]-日程日历示例

    一.简介 用户Wang利用Gridview和其它组件绘制的日历和任务,基本实现一个完整的在线日程管理功能.另外还封装了很多js对象,非常值得参考学习.二.效果图 三.相关下载 https://gith ...

  3. 2-1 git合并 打tag

    tag常用命令(仅供参考): git tag -a V1.4 -m "1.4" 创建一个tag git tag 查看本地tag git tag -d V1.1  删除本地tag g ...

  4. 理解CSV文件以及ABAP中的相关操作

    在很多ABAP开发中,我们使用CSV文件,有时候,关于CSV文件本身的一些问题使人迷惑.它仅仅是一种被逗号分割的文本文档吗? 让我们先来看看接下来可能要处理的几个相关组件的词汇的语义. Separat ...

  5. iOS多图片下载

    iOS多图片下载.在cell里面下载图片.做了缓存优化. (app.icon是图片地址) // 先从内存缓存中取出图片 UIImage *image = self.images[app.icon]; ...

  6. 关于arcgis engine的注记显示与关闭问题

    1.注记的添加需要拿到IGeoFeatureLayer接口下的AnnotationProperties属性,转为IAnnotationLayerPropertiesCollection接口,并创建一个 ...

  7. sharepoint2013爬xls文件：Error initializing IFilter for extension的解决方案

    最近sharepoint2013爬网出现: error initializing IFilter for extension '.xls' (Error code is 0x80030002). Th ...

  8. Java Web中请求转发和请求包含

    1.都是在一个请求中跨越多个Servlet 2.多个Servlet在一个请求中,他们共享request对象.就是在AServle中setAttribute()保存数据在BServlet中由getAtt ...

  9. 优质Android小部件：索尼滚动相册

    虽然骚尼手机卖的不怎么样,但是有些东西还是做的挺好的,工业设计就不用说了,索尼的相册的双指任意缩放功能也是尤其炫酷.其桌面小部件滚动相册我觉得也挺好的,比谷歌原生的相册墙功能好多了,网上搜了一下也没发 ...

  10. CocoaPods安装及使用详情

    CocoaPods是什么? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,SDWebImage等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其他 ...