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

    <title></title>

    <style type="text/css">

        .tooltip

        {

            position: absolute;

        }

    </style>

    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            var x = ;

            var y = ;

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

                var tooltip = "<div id='tooltip'>" + this.title + "</div>"; //创建<div>

                $("body").append(tooltip);

                $("#tooltip").css(

{ "top": e.pageY + "px",

    "left": e.pageX + "px"

}

).show("fast"); //设置X坐标和Y坐标，并且显示

            }).mouseout(function () {

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

            }).mousemove(function (e) {

                $("#tooltip").css(

{ "top": e.pageY + "px",

    "left": e.pageX + "px"

});

            });

        });

    </script>

</head>

<body>

    <p>

        <a href="#" class="cooltip" title="这是我的超链接提示1.">提示</a></p>

    <p>

        <a href="#" class="cooltip" title="这是我的超链接提示1.">提示</a></p>

    <p>

        <a href="#" title="这是自带超链接提示1.">提示</a></p>

    <p>

        <a href="#" title="这是自带超链接提示1.">提示</a></p>

</body>

</html>

Jq超链接提示的更多相关文章

  1. [锋利的JQ]-超链接提示效果

    关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...

  2. jQuery超链接提示，提示跟随鼠标动

    功能:实现鼠标移动到一个超链接时,鼠标右下角产生一个提示,并跟谁鼠标移动,知道鼠标离开超链接. 效果: 源码: <!--本案例是鼠标放在超链接上时,鼠标旁边有提示这是个超练级,以及放在图片上时图 ...

  3. 超链接提示效果jQuery+CSS+html

    我们知道浏览器自带了超链接提示, 只需要在超链接中加入 title 属性就可以了. <a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里 ...

  4. jQuery——超链接提示

    在熟悉jQuery过程中,练习超链接提示显示,发现书本上有个问题,经过查询资料,修改如下: <!DOCTYPE html> <html> <head> <ti ...

  5. 使用 JQueryMobile 点击超链接提示“error loading page” 错误

    使用jquery mobile创建dialog时出现加载错误,“Error Loading Page”. 原因是:jquery mobile页面默认采用ajax方式进行交互,而ajax方式下是不支持f ...

  6. jq页面提示或者页面牵引浏览--页面的指引向导插件

    1.看看插件效果吧 2. html 文件 :index.html <!DOCTYPE html> <html lang="en"> <head> ...

  7. [锋利JQ]-图片提示效果

    新知识点: 在HTML-Dom中 "style" 属性,是所有HTML标签共有的一个对象属性,这个对象属性可以为元素设置内嵌样式. style是元素的属性,但是它自身则是一个对象, ...

  8. 关于超链接自动提示的demo

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. 【JQ学习笔记】提示的效果

    <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.< ...

随机推荐

  1. 网页body中background在ie中显示不出来

    网页body中background在ie中显示不出来 | 浏览:349 | 更新:2014-03-11 14:03 刚才上班在公司网站上写一个页面,在谷歌浏览器,火狐浏览器里调试完后,一切正常,忽然想 ...

  2. C#参数传递、引用类型、值类型等的理解

    本博客不属于技术贴,主要是记录一些自己对不懂得地方的理解和学习的记录,请带着批判的眼光阅读~ 值类型存储在栈上,引用类型存储在堆上.栈是由高到低存储的,遵循先进后出的原则,是内存提前分配好的区域,内存 ...

  3. poj1716 Integer Intervals（差分约束）

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Integer Intervals Time Limit: 1000MS   Me ...

  4. UVA 227 Puzzle - 输入输出

    题目: acm.hust.edu.cn/vjudge/roblem/viewProblem.action?id=19191 这道题本身难度不大,但输入输出时需要特别小心,一不留神就会出问题. 对于输入 ...

  5. 面试题：Java静态/非静态方法重写

    1.非静态方法重写 public class Test { public static void main(String[] args) throws Exception { Tree pine = ...

  6. DOM 对象之 document.all

    1.document.all是页面内所有元素的一个集合: 2.经测试在chrome,safari,opera,ie中均返回一个HTMLALLCollection[xx]对象,在FF中返回是一个unde ...

  7. js判断数组和对象

    <script> var arr=new Array(); var obj={'1':2}; var num=11; function isType(obj){ if(obj instan ...

  8. 2015年阿里巴巴蚂蚁金服校招JAVA研发工程师内推电话面试

    没想到阿里校招如此之早,虽然早已进入复习备战状态,但还是感觉有些措手不及...找了个在蚂蚁金服做HR的同学帮忙了内推,然后在最近的几天匆匆忙忙地复习JAVA(之前都把精力放在了数据结构.算法等基础上了 ...

  9. 查看oracle中的中文所占字节数

    select userenv('language') from dual 显示:SIMPLIFIED CHINESE_CHINA.ZHS16GBK 表示一个汉字占用两个字节. 显示:SIMPLIFIE ...

  10. SQLServer优化资料整理（二）

    存储过程编写经验和优化措施 一.适合读者对象:数据库开发程序员,数据库的数据量很多,涉及到对SP(存储过程)的优化的项目开发人员,对数据库有浓厚兴趣的人. 二.介绍:在数据库的开发过程中,经常会遇到复 ...