jquery实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>文字提示</title>

 <!--   引入jQuery -->

 <script src="../../scripts/jquery.js" type="text/javascript"></script>

<style type="text/css">

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 */

#tooltip{

    position:absolute;

    border:1px solid #333;

    background:#f7f5d1;

    padding:1px;

    color:#333;

    display:none;

}

</style>

<script type="text/javascript">

//<![CDATA[

$(function(){

    var x = 10;

    var y = 20;

    $("a.tooltip").mouseover(function(e){

           this.myTitle = this.title;

        this.title = "";

        var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素

        $("body").append(tooltip);    //把它追加到文档中

        $("#tooltip")

            .css({

                "top": (e.pageY+y) + "px",

                "left": (e.pageX+x)  + "px"

            }).show("fast");      //设置x坐标和y坐标，并且显示

    }).mouseout(function(){

        this.title = this.myTitle;

        $("#tooltip").remove();   //移除

    }).mousemove(function(e){

        $("#tooltip")

            .css({

                "top": (e.pageY+y) + "px",

                "left": (e.pageX+x)  + "px"

            });

    });

})

//]]>

</script>

</head>

<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>

</body>

</html>

手写 title 提示的更多相关文章

  1. 简易-五星评分-jQuery纯手写

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  2. 超级简单的jQuery纯手写五星评分效果

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  3. 手把手集成web端手写公式功能

    何为手写公式,很简单,就是在网页上可以写出数学公式,并能够生成Latex格式的字符串.废话不多说,直接走正题. 一.首先大家可以先去官网了解一下myscript这个插件 官方网站:https://de ...

  4. 一套手写ajax加一般处理程序的增删查改

    倾述下感受:8天16次驳回.这个惨不忍睹. 好了不说了,说多了都是泪. 直接上代码 : 这个里面的字段我是用动软生成的,感觉自己手写哪些字段太浪费时间了,说多了都是泪 ajax.model层的代码: ...

  5. Atitit s2018.2 s2 doc list on home ntpc.docx  \Atiitt uke制度体系 法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别 讯飞科大 语音云.docx \Atitit 代码托管与虚拟主机.docx \Atitit 企业文化 每日心灵 鸡汤 值班 发布.docx \Atitit 几大研发体系对比 Stage-Gat

    Atitit s2018.2 s2 doc list on home ntpc.docx \Atiitt uke制度体系  法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别   ...

  6. CSS实现自定义手型气泡提示

    实现自定义的手型气泡提示 <html> <head> <meta charset="utf-8"> <title></titl ...

  7. 手写控件，frame，center和bounds属性

    一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4)如果是button等控件,还需考虑控件的单击事件等 (5)注意:View ...

  8. .net学习之Session、Cookie、手写Ajax代码以及请求流程

    1.IIS 7 以上版本集成了两种模式,一种是经典模式,一种是集成模式(直接将asp.net框架集成到IIS中) 2.浏览器和服务器端通过什么技术来实现的?Socket(套接字),通信的语法是HTTP ...

  9. iOS开发UI篇—手写控件，frame，center和bounds属性

    iOS开发UI基础—手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...

随机推荐

  1. python操作RabbiMQ

    RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队列(MQ)是一种应用程序 ...

  2. Apache-Tika解析XML文档

    通常在使用爬虫时,爬取到网上的文章都是各式各样的格式处理起来比较麻烦,这里我们使用Apache-Tika来处理XML格式的文章,如下: package com.mengyao.tika.app; im ...

  3. Heavy Transportation

    题目大意: 雨果的沉重运输是快乐的,当浮空运输出现故障时候他可以扩展业务, 但他需要一个聪明的人告诉他是否真的是一种把他的客户构建了巨型钢起重机的地方需要的所有街道都可以承受重量(这句是直接有道翻译的 ...

  4. url找不到指定位置

    刚才遇到了把css装入一个文件夹下,然后有的图片失效了. 后来解决是在.css里把./images 换成 ../images 原来css找图片的地址是基于自身.css文件的位置寻找的,不是以引用它的. ...

  5. IOS中线程的通信

    一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任务后,转到另1个线程继续执行任务 ...

  6. maven建module子模块

    在父工程中,点击new ->other  ->maven  -> maven module, 按照提示直到完成. module 可以是普通的工程也可以是web工程. 遇到的问题: 新 ...

  7. 协议系列之HTTP协议

    什么是HTTP\HTTPS HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.HTTP协议用于从WWWserver传输超文本到本地浏览器的传输协议,它能使浏览 ...

  8. leetcode第一刷_Construct Binary Tree from Preorder and Inorder Traversal

    构造方式跟中序与后序全然一样,并且一般都习惯正着来,所以更简单. 代码是之前写的,没实用库函数,不应该. TreeNode *buildIt(vector<int> &preord ...

  9. 通过扩展RandomAccessFile类使之具备Buffer改善I/O性能--转载

    主体: 目前最流行的J2SDK版本是1.3系列.使用该版本的开发人员需文件随机存取,就得使用RandomAccessFile类.其I/O性能较之其它常用开发语言的同类性能差距甚远,严重影响程序的运行效 ...

  10. [转] linux新的API signalfd、timerfd、eventfd使用说明

    http://blog.csdn.net/gdutliuyun827/article/details/8460417 三种新的fd加入linux内核的的版本: signalfd:2.6.22 time ...