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基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
Javascript高级技巧分享
Feb 25 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
Vue watch响应数据实现方法解析
Jul 10 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发送邮件类代码附详细说明
2008/07/10 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP递归算法的简单实例
2019/02/28 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
Django model select的多种用法详解
2019/07/16 Python
Django nginx配置实现过程详解
2020/09/10 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
视光学毕业生自荐书范文
2014/02/13 职场文书
《木笛》教学反思
2014/03/01 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
法人授权委托书样本
2014/09/19 职场文书
花木兰观后感
2015/06/10 职场文书
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技