jQuery实现链接的title快速出现的方法


Posted in Javascript onFebruary 20, 2017

具体代码如下所示:

<!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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" title="这是我的超链接提示1">提示1</a></p>
 <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" title="这是我的超链接提示2">提示2</a></p>
 <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="这是自带提示1">自带提示1</a></p>
 <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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快速出现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 #Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 #Javascript
javascript基础练习之翻转字符串与回文
Feb 20 #Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 #Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 #Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 #Javascript
js中new一个对象的过程
Feb 20 #Javascript
You might like
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python3中函数参数的四种简单用法
2018/07/09 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python super()函数使用及多重继承
2020/05/06 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
Python 实现一个计时器
2020/07/28 Python
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
Structs界面控制层技术
2013/10/11 面试题
汽车销售顾问求职自荐信
2014/01/01 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python