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

效果：

源码：

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

 <!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. ReactNative——打包发布

    1.生成一个签名密钥 ‘ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -k ...

  2. Lind.DDD.Repositories.EF层介绍

    回到目录 Lind.DDD.Repositories.EF以下简称Repositories.EF,之所以把它从Lind.DDD中拿出来,完全出于可插拔的考虑,让大家都能休会到IoC的魅力,用到哪种方法 ...

  3. Lind.DDD.UoW~方法回调完成原子化操作

    回到目录 本文来自于实践中的不足 在最近开始过程中,遇到了一个问题,之前设计的工作单元UoW只支持Insert,Update,Delete三种操作,即开发人员可以将以上三种操作同时扔进工作单元,由工作 ...

  4. 基于 Eclipse 的 MapReduce 开发环境搭建

    文 / vincentzh 原文连接:http://www.cnblogs.com/vincentzh/p/6055850.html 上周末本来要写这篇的,结果没想到上周末自己环境都没有搭起来,运行起 ...

  5. jQuery弹出关闭遮罩层

    效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  6. 【高级功能】使用canvas元素（第一部分）

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

  7. 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（九）地图定位模块

    config.xml文件的配置如下: <widget label="地图定位" config="widgets/esri/Location/LocationWidg ...

  8. Introduction to Microsoft Dynamics 365 licensing

    Microsoft Dynamics 365 will be released on November 1. In preparation for that, Scott Guthrie hosted ...

  9. SharePoint 2013 页面访问，Url中间多一段"_layouts/15/start.aspx#"

    问题描述: 我想访问如下页面 http://Host/_layouts/15/ManageFeatures.aspx 点击以后页面地址没有错,但是中间多了一段“_layouts/15/start.as ...

  10. 微信平台ASPX高级定制开发（一）：如何使用C#建立响应微信接入和自动回复的代码

    微信平台不解释了,如果不了解的百度一下下,如果不会用微信,请自宫,光盘重启电脑,打开CMD输入Format C:.网上有很多针对企业级的高级定制ASPX开发,写得草草了事,很多男人干事都草草了事,这可 ...