<!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. HTML\Script 去除关键字

    以下是引用片段: ----- /**/ /// <summary> /// 去除HTML标记 /// </summary> /// <param name="N ...

  2. C# 类属性封装、字段的详解

    今日敲代码时,突然感觉对类的属性封装.字段有点犯迷糊了..连基础的都不知道了,那敲的代码怎么能严谨高效的.果断拿起各种高级编程.大全啥的翻起来~~这不再把自己的理解写下来(定义都是直接抄书的),献给同 ...

  3. mvc原理和mvc模式的优缺点

    一.mvc原理   mvc是一种程序开发设计模式,它实现了显示模块与功能模块的分离.提高了程序的可维护性.可移植性.可扩展性与可重用性,降低了程序的开发难度.它主要分模型.视图.控制器三层. 1.模型 ...

  4. UIAlertView与UIActionSheet

    1.UIAlertView(警告框) 1.1 创建警告框,设置样式 - (IBAction)alertView:(UIButton *)sender {//创建button按钮 //创建警告框的实例 ...

  5. 一、Autofac入门

    想要将autofac集成到你的应用程序中需要经过如下步骤: 1.使用控制翻转(IoC)的思想架构你的应用程序: 2.添加autofac引用: 3.在应用程序入口...(At application s ...

  6. 拥有iframe页面的子父类窗口调用JS的方法，并且注意的事项

    一.前言 我页面用的是EasyUI的弹出窗口里面嵌入一个iframe.第一:父窗口打开子窗口是一个新增用户信息的iframe子页面,点击保存后,子窗口iframe则去调用父窗口的function cl ...

  7. JavaScript---while和do while的区别

    JavaScript,while 和do while的区别: 场景一:小盒子身上有100元,用while输出能吃多少次米线,一碗米线12元,最终还剩下多少钱. var money = 100; whi ...

  8. Sunscreen（POJ 3614 优先队列）

    Sunscreen Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5898   Accepted: 2068 Descrip ...

  9. WPF笔记(1.9 样式和控件模板)——Hello，WPF！

    原文:WPF笔记(1.9 样式和控件模板)--Hello,WPF! 资源的另一个用途是样式设置: <Window >  <Window.Resources>    <St ...

  10. Android高德地图开发具体解释

    这段时间开发的时候用到了高德地图,对高德地图开发有心得体会,如今分享给大家.对我开发过百度地图的我来说,整体来说高德地图Demo,没有百度解说的具体 个人更偏向于使用百度地图,可是没办发,项目须要使用 ...