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 相关文章推荐
JQuery开发的数独游戏代码
Oct 29 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
javascript 实现 原路返回
Jan 21 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 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实现文件安全下载
2006/10/09 PHP
php 获取客户端的真实ip
2009/11/30 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
js创建对象的方式总结
2015/01/10 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
在Django的URLconf中使用命名组的方法
2015/07/18 Python
python操作mysql数据库
2017/03/05 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
python实现彩票系统
2020/06/28 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
法学研究生自我鉴定范文
2013/12/04 职场文书
xxx同志考察材料
2014/02/07 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2016年国陪研修感言
2015/11/18 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
基于Python编写一个监控CPU的应用系统
2022/06/25 Python