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 相关文章推荐
js 回车提交表单两种实现方法
Dec 31 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
jQuery DOM操作实例
Mar 05 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
javascript中Function类型详解
2015/04/28 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
农村婚礼证婚词
2014/01/10 职场文书
初中学生期末评语
2014/04/24 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
品德与社会教学反思
2016/02/24 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL