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

效果：

源码：

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

 <!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. javaweb学习总结(三十八)——事务

    一.事务的概念 事务指逻辑上的一组操作,组成这组操作的各个单元,要不全部成功,要不全部不成功. 例如:A——B转帐,对应于如下两条sql语句  update from account set mone ...

  2. 哈哈：sqlserver2008附加数据库时操作系统错误5(拒绝访问)错误5012的解决办法

    老师说:无论干什么,出错了,先大笑三声.如果人多了,在心里也要大笑三声.哈哈哈!!! 刚刚重装系统完后,然后想学习.自己去安装sqlserver2008数据库,完之后想附加之前的数据库.可是当我一点确 ...

  3. phpstorm 软件

    PhpStorm是一款强大的IDE,非常适合于PHP开发人员及前端工程师.提供诸于:智能HTML/CSS/JavaScript/PHP编辑.代码质量分析.版本控制集成(SVN.GIT).调试和测试等功 ...

  4. SQL Server 2012提供的OFFSET/FETCH NEXT与Row_Number()对比测试（转）

    原文地址:http://www.cnblogs.com/downmoon/archive/2012/04/19/2456451.html 在<SQL Server 2012服务端使用OFFSET ...

  5. 学习zepto.js(对象方法)[6]

    first: 获取当前对象集合中的第一个dom元素. $("div").first(); // 返回第一个div对象(zepto对象) //相当于$("div" ...

  6. 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（十）态势标绘模块

    config.xml文件的配置如下: <widget label="态势标绘" icon="assets/images/impact_area_over.png&q ...

  7. 让ABAP开发者更加轻松的若干快捷键

    引言 ABAP是一种和当代编程语言在许多方面有着相当不同的编程语言.ABAP的某些方面可能会让我们奇怪,为什么它会如此复杂?而它的某些方面又是那么杰出,给予了ABAP开发者们比其它任何语言更多的便利. ...

  8. SharePoint 2013 状态机工作流之UpdateItemActivity

    没什么可说的,一个Activity的使用介绍,其他类似的Activity也可以参考这个使用. 1.添加ApplyActivation和UpdateItemActivity,在onWorkflowAct ...

  9. Event 8306 5021 5059 5057发布安全令牌时异常

    现象:站点访问一个,应用程序池就自动停掉一个 日志报错       解决: 1.受域策略影响,作为批处理作业登录选项被锁定,需修改域策略: 更新后:     2.确保程序池账户倒在IIS_IUSER组 ...

  10. IOS开发基础知识--碎片17

    1:contentSize.contentInset和contentOffset区别 contentSize 是scrollview中的一个属性,它代表scrollview中的可显示区域,假如有一个s ...