jquery实现链接的title快速出现
<!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="#" class="tooltip" title="这是我的超链接提示1">提示1</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a></p>
<p><a href="#" title="这是自带提示1">自带提示1</a></p>
<p><a href="#" 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快速出现的更多相关文章
- 使用jquery删除链接所在的行
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery改变链接移上光标时的颜色实例
效果体验http://hovertree.com/texiao/jquery/18/ 完整代码如下: <!DOCTYPE html> <html> <head> & ...
- jquery文章链接
好文链接 1.jQuery是js的一个库,封装了js中常用的逻辑: 2.调用jQuery: (1).本地调用,在script标签的src属性里写上jQuery文件的地址. (2).使用CDN调用jQu ...
- jquery左右链接类似frameset的插件
一般在使用jquery的扩展的 ui方面的插件, 都要注意链接两个文件 一个是ui 相关的js文件 另一个是 ui相关的 css文件! 参考这个css布局 通常多个平行的items 都是用ul li来 ...
- html a 链接标签title属性换行鼠标悬停提示内容的换行效果
鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? 这里DIVCSS5总结介绍两种换行方法为大 ...
- jquery 地址栏链接与a标签链接匹配 特效代码总结（二）
如题所述,当出现这样的功能,点击某个链接后,给跳转后的该链接地址添加样式,通过添加class为current来增加特殊样式. 如图所示:点击HTML+css3跳转后,给其添加如图样式: js代码如下: ...
- JQuery插件使用之Validation 快速完成表单验证的几种方式
JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照 ...
- Jquery改动页面标题title其他JS失效
Jquery代码 $("title").html("hello"); 后来仅仅好用以下这段js代码来实现 Js代码 document.title=&qu ...
- jquery定义链接跳转的高亮显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- win8快捷键
win+Q/S搜索所有位置 win+W搜索设置 win+E文件资源管理器 win+R运行 win+T选中第一个应用程序(不确定) win+U轻松使用设置中心 win+I设置 win+P投影 win+D ...
- Python机器学习中文版目录
建议Ctrl+D保存到收藏夹,方便随时查看 人工智能(AI)学习资料库 Python机器学习简介 第一章 让计算机从数据中学习 将数据转化为知识 三类机器学习算法 第二章 训练机器学习分类算法 透过人 ...
- Linux增加LV（逻辑卷）容量
Linux增加LV(逻辑卷)容量 2017-09-29-17:34:13 个人原创博客,转载请注明出处. 查看逻辑卷的相关命令: lvs vgs 命令: [root@arch ~]# vgs VG # ...
- angularJS使用rootscope创建父域和子模态框通用的属性与函数
1. 在声明创建controller指明引用$rootscope reviewInterfaceDo.controller('reviewInterfaceDo', function($scope, ...
- linux常用命令汇总（更新中...）
文本查看与编辑 1.文本编辑命令 vi/vim 2.查看文件内容命令 命令 说明 命令格式 参数 cat 将一个文件的内容连续输出在屏幕上 cat [-option] 文件名 -n:将行号一起显示在 ...
- thinkphp5 taglib自定义标签教程
学着写了一下,终于搞定了,顺便分享一下!taglib是tp框架自定义标签功能,如果你用过cms,肯定见过类似: {dede:arclist typeid='' row='' col='' titlel ...
- POJ-1032-拆数字
Description New convocation of The Fool Land's Parliament consists of N delegates. According to the ...
- New UWP Community Toolkit
概述 UWP Community Toolkit 是一个 UWP App 自定义控件.应用服务和帮助方法的集合,能够很大程度的简化和指引开发者的开发工作,相信广大 UWPer 并不陌生. 下面是截取自 ...
- SpringAOP-JDK 动态代理和 CGLIB 代理
在 Spring 中 AOP 代理使用 JDK 动态代理和 CGLIB 代理来实现,默认如果目标对象是接口,则使用 JDK 动态代理,否则使用 CGLIB 来生成代理类. 1.JDK 动态代理 那么接 ...
- 转载--MYSQL5.7：Access denied for user 'root'@'localhost' (using password:YES)解决方法
1.打开MySQL目录下的my.ini文件,在文件的最后添加一行"skip-grant-tables",保存并关闭文件; 2.重启MySQL服务; 3.通过cmd行进入MySQL的 ...