1. <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
  2. <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
  3. <p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
  4. <p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
  1. $(function(){
  2. $(".tooltip").mouseenter(function(e){
  3. this.mytitle=this.title
  4. this.title=""
  5. var a="<div>"+this.mytitle+"</div>"
  6. $("body").append(a);
  7. $("div").css({
  8. "top": (e.pageY + y) + "px",
  9. "left": (e.pageX + x) + "px"
  10. }).show("fast")
  11. }).mouseout(function(){
  12. this.title= this.mytitle;
  13. $("div").remove();
  14. });
  15. })

学习心得:

不要在p标签下追加div元素,会出现一个大的偏差值!

原来!this和$("this")是有所不同,如果上文

  1. this.title改写成$("this").attr("title")
    会导致下面的mouseout事件无法访问保存下来的title

【JQ学习笔记】提示的效果的更多相关文章

  1. jq学习笔记(二)

    jq笔记-dom篇-慕课网学习笔记 1.jQuery节点创建与属性的处理 创建元素节点: 1.$("<div></div>") 创建为本节点: 1.$(&q ...

  2. ANDROID_MARS学习笔记_S02_010_Animation_动画效果

    一.流程 1.把要实现动画的一系列图片复制到res/drawable文件夹 2.在此文件新建一个xml文件用来组织图片 3.在mainactivity中用imageView.setBackground ...

  3. iOS学习笔记-084.粒子效果——路径移动

    https://blog.csdn.net/qiwenmingshiwo/article/details/75806637 粒子效果路径移动一说明1 效果2 步骤分析二代码1 VCViewh2 VCV ...

  4. HTML 学习笔记 CSS3 (文本效果)

    text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...

  5. JavaScript学习笔记- 省市级联效果

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  6. css3学习笔记之文本效果

    CSS3的文本阴影 CSS3中,text-shadow属性适用于文本阴影. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html ...

  7. jq学习笔记(一)

    1 .attr() 与 .removeAttr()方法 - atr()方法用来获取和设置元素属性 attr()有4个表达式: attr(传入属性名):获取属性的值 attr(属性名, 属性值):设置属 ...

  8. JS学习笔记 - 微博发布效果

    <script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...

  9. Dynamic CRM 2013学习笔记(十九)自定义审批流1 - 效果演示

    CRM的项目,审批流是一个必须品.为了更方便灵活地使用.配置审批流,我们自定义了一整套审批流.首先来看下它的效果: 1. 审批模板 这是一个最简单的审批流,首先指定审批实体,及相关字段,再配置流程节点 ...

随机推荐

  1. Oracle中中文、数字,英文混杂形式的字段进行排序的方法

    http://blog.csdn.net/p451933505/article/details/9272257 对Oracle中中文.数字.英文混杂形式的字段进行排序的方法: 例如: order by ...

  2. c# 异步调用简单例子(转载)

    首先来看一个简单的例子: 小明在烧水,等水烧开以后,将开水灌入热水瓶,然后开始整理家务 小文在烧水,在烧水的过程中整理家务,等水烧开以后,放下手中的家务活,将开水灌入热水瓶,然后继续整理家务 这也是日 ...

  3. HTML5 自定义属性 data-*介绍

    在HTML5之前HTML4我们也可以自定义属性通过setAttribute去设置或者直接写在HTML标签里面那么HTML5新增data-*(*可以替换成你喜欢的任意名字)属性有什么用呢? 更便的捷操作 ...

  4. 用jquery制作加载条

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Gallery过时替代方案HorizontalScrollView

    布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:androi ...

  6. sublime 控制台输入解决方案

    下面的配置是通过konsole控制台自带的参数解决了sublime不能输入的问题,这种方式适合任何一种语言 { "cmd": ["konsole"," ...

  7. Android小记之--android:listSelector

    使用ListView和GridView时,经常使用android:listSelector来使item被选中时的状态.但如果不配合android:drawSelectorOnTop来使用可能达不到想要 ...

  8. java面试题大全-基础方面

    Java基础方面: 1.作用域public,private,protected,以及不写时的区别答:区别如下:作用域           当前类       同一package  子孙类        ...

  9. 解决:getWeatherbyCityName(city),服务器无法处理请求。 ---> 未将对象引用设置到对象的实例。

    原文:getWeatherbyCityName(city),服务器无法处理请求. ---> 未将对象引用设置到对象的实例. 解决方法:不要直接使用 “服务引用” , 添加为 “Web 引用” 最 ...

  10. LSH、ITQ、SKLSH图像检索实验实现(包含源码下载地址)

    原文来自我的独立blog:http://www.yuanyong.org/blog/cv/lsh-itq-sklsh-compliment 这两天寻找idea,想来思去也没想到好点的方法,于是把前段时 ...