<!DOCTYPE html>

 <html>

  <head>

  <meta charset="utf-8" />

  <title>login</title>

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

  </head>

  <style>

   body{

    margin:0;

    padding:40px;

    background:#fff;

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

    color:#555;

    line-height:180%;

   }

   p{

    clear:both;

    margin:0;

    padding:.5em 0;

   }

   #tooltip{

    position:absolute;

    border:1px solid #333;

    background:#f7f5d1;

    padding:1px;

    color:#333;

    display:none;

   }

  </style>

  <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>

  <script>

   $(function () {

       $("a.tooltip").mouseover(function(e){

        var tooltip="<div id='tooltip'>"+this.title+"</div>";

        $("body").append(tooltip);

        $("#tooltip")

             .css({

                 "top":e.pageY+"px",

                 "left":e.pageX+"px"

             }).show("fast");

       }).mouseout(function(){

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

       });

   });

  </script>

  </body>

 </html>

jQuery 事件 - pageY 属性

显示鼠标指针的位置

show() 方法

显示所有隐藏的 <p> 元素：

注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

JQuery中这个function(e)那个e是什么意思?

回答一：e是事件，在firefox中只能在事件现场使用window.event，所以只有把event传给函数使用。为了兼容FF和其它浏览器，一般会在函数里重新给e赋值：

e = window.event || e;

也就是说，如果window.event存在，则该浏览器支持直接使用window.event，否在就是不支持，不支持就使用传进来的e。

回答二：事件对象event 和我们普通写的 <input type="text" onclick = "aaa(event)">中的这个event一模一样

jquery里边的事件绑定函数中的参数e 都是在框架中给处理好了的 兼容各种浏览器

jquery实现链接的title快速出现的更多相关文章

  1. 使用jquery删除链接所在的行

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. jquery改变链接移上光标时的颜色实例

    效果体验http://hovertree.com/texiao/jquery/18/ 完整代码如下: <!DOCTYPE html> <html> <head> & ...

  3. jquery文章链接

    好文链接 1.jQuery是js的一个库,封装了js中常用的逻辑: 2.调用jQuery: (1).本地调用,在script标签的src属性里写上jQuery文件的地址. (2).使用CDN调用jQu ...

  4. jquery左右链接类似frameset的插件

    一般在使用jquery的扩展的 ui方面的插件, 都要注意链接两个文件 一个是ui 相关的js文件 另一个是 ui相关的 css文件! 参考这个css布局 通常多个平行的items 都是用ul li来 ...

  5. html a 链接标签title属性换行鼠标悬停提示内容的换行效果

    鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? 这里DIVCSS5总结介绍两种换行方法为大 ...

  6. jquery 地址栏链接与a标签链接匹配 特效代码总结（二）

    如题所述,当出现这样的功能,点击某个链接后,给跳转后的该链接地址添加样式,通过添加class为current来增加特殊样式. 如图所示:点击HTML+css3跳转后,给其添加如图样式: js代码如下: ...

  7. JQuery插件使用之Validation 快速完成表单验证的几种方式

    JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照 ...

  8. Jquery改动页面标题title其他JS失效

    Jquery代码   $("title").html("hello"); 后来仅仅好用以下这段js代码来实现 Js代码   document.title=&qu ...

  9. jquery定义链接跳转的高亮显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 3D模型展示以及体积、表面积计算

    本文原创 如转载请注明出处!!! 本博客地址http://www.cnblogs.com/we-jack 本文原创,如果有同样需求的小伙伴请第一时间联系我 或者在留言区留言 上次为大家提供了3D模型的 ...

  2. 什么是yum源，如何更改yum源

    Yum(全称为 Yellow dog Updater, Modified) yum是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器 ...

  3. GEETEST极验召集互联网大佬齐聚光谷，共同探讨交互安全问题

    全球互联网技术在飞速发展的同时,网络安全事件也随之频发.除了直接带来经济损失的网络恶意攻击之外,企业在多个方面也遭受着不同程度的网络恶意攻击,包括品牌形象.管理时间.企业竞争力.客户成交量.用户行为等 ...

  4. 背景新增属性和css渐变及倒影

    背景新增属性和css渐变及倒影 一.background新增属性 background-size:指定对象的背景图像的尺寸大小. background:url() 0 0,url() 0 100%;多 ...

  5. WinSock 异步I/O模型-2

    事件选择(WSAEventSelect): WSAEventSelect模型是Windows Sockets提供的另外一个有用的异步I/O模型.该模型允许一个或多个套接字上接收以事件为基础的网络事件通 ...

  6. Vue之九数据劫持实现MVVM的数据双向绑定

    vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...

  7. thinkphp5 taglib自定义标签教程

    学着写了一下,终于搞定了,顺便分享一下!taglib是tp框架自定义标签功能,如果你用过cms,肯定见过类似: {dede:arclist typeid='' row='' col='' titlel ...

  8. Android GC Log

    最近在研究Android内存垃圾回收的内容,遇到一些自己之前不知道的技巧和方法.现在分享一种简单的在Logcat中可以看到垃圾回收状态的方法.经常关注Logcat日志的童鞋偶尔会看到一条类似于以下形式 ...

  9. Spring Boot应用的后台运行配置

    酱油一篇,整理一下关于Spring Boot后台运行的一些配置方式.在介绍后台运行配置之前,我们先回顾一下Spring Boot应用的几种运行方式: 运行Spring Boot的应用主类 使用Mave ...

  10. .NET Core快速入门教程 3、我的第一个.NET Core App （CentOS篇）

    一.前言 本篇开发环境?1.操作系统:CentOS7(因为ken比较偏爱CentOS7)2.SDK版本:.NET Core 2.0 Preview 你可能需要的前置知识1.了解如何通过Hyper-V安 ...