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

效果：

源码：

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

 <!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. SpringMVC的工作原理

    1.首先浏览器发送请求给前端控制器DispatcherServlet,DispatcherSerlvet根据请求信息,基于一定的原则选择合适的控制器进行处理并把请求委托给它. 2.页面控制器接收到请求 ...

  2. LNMP环境搭建完整步骤

    零.resource   http://pan.baidu.com/s/1o83r3S2 一.centos 6.4.VirtualBox 5.0.14 二.nginx 1.9.9 安装 [root@p ...

  3. php 实现设计模式之 享元模式

    <?php class Book{ public $title; public $author; public function __construct($title,$author){ $th ...

  4. node-inspector调试工具应用

    一.起因 想调试某些开源的nodejs项目,然后就选择了node-inspector插件. 他的优点: 1.可以借用chrome或firefox浏览器进行调试,与前端调试融合. 2.配置简单 二.必备 ...

  5. mysql 添加索引 mysql 创建索引

    1.添加PRIMARY KEY(主键索引) mysql>ALTER TABLE `table_name` ADD PRIMARY KEY ( `column` ) 2.添加UNIQUE(唯一索引 ...

  6. github的pull request是指什么意思？有什么用处

    github的pull request是指什么意思? 来看看某乎某位阿牛的理解,多么的简单粗暴! 我尝试用类比的方法来解释一下 pull reqeust.想想我们中学考试,老师改卷的场景吧.你做的试卷 ...

  7. jQuery静态方法inArray,grep,merge,makeArray方法使用和源码分析

    inArray方法 确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回 -1 ). 示例: var arr = [ 4, "Pete", 8, "John&q ...

  8. js 把对象按照属性名的字母顺序进行排列

    var obj = {name: "zhangsan", age: 8, ace: 5, nbme: "lisi"};//要排序的对象function objK ...

  9. 利用CSS3实现图片无间断轮播图的实现思路

    前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...

  10. asp.net mvc 中 一种简单的 URL 重写

    asp.net mvc 中 一种简单的 URL 重写 Intro 在项目中想增加一个公告的功能,但是又不想直接用默认带的那种路由,感觉好low逼,想弄成那种伪静态化的路由 (别问我为什么不直接静态化, ...