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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
微信小程序实现左右列表联动
May 19 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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
我的论坛源代码(三)
2006/10/09 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
php报错502badgateway解决方法
2019/10/11 PHP
突发奇想的一个jquery插件
2010/11/19 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
python实现周期方波信号频谱图
2018/07/21 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
python 19个值得学习的编程技巧
2020/08/15 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
局域网标准
2016/09/10 面试题
爱国主义教育演讲稿
2014/08/26 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书