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 ...
随机推荐
- Open Live Writer
最近突然发现我的CSDN博客里面的很多内容都被删除了,虽然我没有用CSDN写博了,不过还是想到可能我现在用的博客园写博,如果有些内容敏感的话会不会也会被删除文章或者关掉我的博客.心里满是担心,于是想说 ...
- day01的那些事
代码之道 路漫漫其修远兮,吾将上下而求索
- python web开发-flask中日志的使用
Flask使用日志记录的方式: 初始化flask应用实例 在flask中使用logger,需要初始化一个flask的应用 app = Flask(__name__) 2. 调用logger 直接调用l ...
- 【Python】 用户图形界面GUI wxpython IV 菜单&对话框
更多组件 ■ 菜单栏 Menu 菜单是很多GUI必不可少的一部分.要建立菜单,必须先创建菜单栏: menuBar = MenuBar() menu = Menu() item1 = menu.Appe ...
- linux系统磁盘空间满了怎么办看完这篇文章之后就知道怎么解决了
废话不多说直接上图 可以看得到 / 下面已使用100%,已经没有剩余空间可以使用了,上面跑的服务已经访问不了了. 接下来我就看看有没有垃圾文件可以清理的 du -sh * 由于这个机器比较特殊,上面有 ...
- SQL更新语句,Error Code: 1175. You are using safe update(在进行视图更新的时候遇到)
转发于:http://blog.csdn.net/qq_26684469/article/details/51105188?locationNum=5&fps=1 原来的SET SQL_SAF ...
- Android类参考---SQLiteOpenHelper
public 抽象类 SQLiteOpenHelper 继承关系 java.lang.Object |____android.database.sqlite.SQLiteOpenHelper 类概要 ...
- 设计模式之 外观模式详解(Service第三者插足,让action与dao分手)
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 各位好,LZ今天给各位分享一 ...
- Java注解(2)-注解处理器(运行时|RetentionPolicy.RUNTIME)
如果没有用来读取注解的工具,那注解将基本没有任何作用,它也不会比注释更有用.读取注解的工具叫作注解处理器.Java提供了两种方式来处理注解:第一种是利用运行时反射机制:另一种是使用Java提供的API ...
- 动态规划(Dynamic programming) 走楼梯
来自:算法爱好者 有一座高度是10级台阶的楼梯,从下往上走,每跨一步只能向上1级或者2级台阶,要求用程序来求出一共有多少种走法? f(10) = f(9) + f(8) f(9) = f(8) + f ...