在熟悉jQuery过程中，练习超链接提示显示，发现书本上有个问题，经过查询资料，修改如下：

 <!DOCTYPE html>

 <html>

 <head>

     <title>超连接提示</title>

     <meta charset="utf-8">

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

     <script type="text/javascript">

     $(function(){

         var x=10,y=20;

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

             this.myTitle=this.title;

             this.title="";

             //创建div元素

             var $tooltip=$("<div id='tooltip'>"+this.myTitle+"</div>");

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

             $("#tooltip")

                 .css({

                     "position":"absolute",//这一行必须添加，否则显示错误。添加之后，IE edge会同时显示空的原提示框，chrome显示正常

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

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

                 }).show("fast");

         })

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

效果如下图：

IE edge中的效果：

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

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

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

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

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

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

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

  4. jQuery图片提示和文字提示

    图片提示: 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  5. HubSpot – 网站开发必备的 jQuery 信息提示库

    HubSpot 一款功能丰富的 jQuery 消息提示插件.它可以帮助你个性化显示您的应用程序的事务性消息.您可以轻松地包裹 Ajax 请求进度,成功和错误消息,还可以添加操作链接到您的消息中. Hu ...

  6. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

  7. seajs加载jquery时提示$ is not a function该怎么解决

    这篇文章主要介绍了seajs加载jquery时提示$ is not a function该怎么解决的相关资料,需要的朋友可以参考下 jquery1.7以上的都支持模块化加载,只是jquery默认的是支 ...

  8. Eclipse安装插件支持jQuery智能提示

    Eclipse安装插件支持jQuery智能提示 最近工作中用到jQuery插件,需要安装eclipse插件才能支持jQuery智能提示,在网上搜索了一下,常用的有三个插件支持jQuery的智能提示:1 ...

  9. Eclipse支持Jquery代码提示（JqeuryWTP）

    问题描述:        Eclipse支持Jquery代码提示   问题解决: 下载 JqueryWTP.jar文件         文件替换        在Eclipse/plugin 路径下, ...

随机推荐

  1. CentOS7下修改默认网卡名为eth0的两种方法

    前言 大家都知道CentOS7默认的网卡名称是和设备名称是随机的,如果要修改网卡名称以 eth 开头,有两种方式,如下: 第一种方式 这种方式适合在安装操作系统的时候进行设置, 点击 Tab,打开ke ...

  2. HTML5解决大文件断点续传

    一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...

  3. [USACO10HOL]牛的政治Cow Politics

    农夫约翰的奶牛住在N ( <= N <= ,)片不同的草地上,标号为1到N.恰好有N-1条单位长度的双向道路,用各种各样的方法连接这些草地.而且从每片草地出发都可以抵达其他所有草地.也就是 ...

  4. [CSP-S模拟测试]:购物（柯朵莉树）

    题目描述 $visit_world$有一个商店,商店里卖$N$个商品,第$i$个的价格为$a[i]$我们称一个正整数$K$是美妙的,当且仅当我们可以在商店里选购若干个商品,使得价格之和落在区间$[K, ...

  5. 利用python进行数据分析--pandas入门2

    随书练习,第五章  pandas入门2 # coding: utf-8 # In[1]: from pandas import Series,DataFrame import pandas as pd ...

  6. Spring_Boot 简单例子

    第一步创建项目: 创建项目地址:https://start.spring.io/ 接下来就下载到本地了 跟着加压 接着用idea打开:等待资源下载完成 我写了个简单的:增删改查 项目结构: dao层: ...

  7. centos6最小化安装默认没有 NetworkManager服务

    转载Centos6最小化安装中设置网卡默认启动   Centos 6.0版本提供了一个"最小化"(Minimal)安装的选项.这是一个非常好的改进,因为系统中再也不会存在那些不必要 ...

  8. vim推荐的光标移动配置文件?

    http://roclinux.cn/?p=1466 inoremap jk inoremap ... 参考较好的vim设置文件 : 共享粘贴板: set clipboard+=unnamed 除了映 ...

  9. iOS 命令行打包--xcworkspace

    参考: 打包的具体操作步骤: https://www.jianshu.com/p/6a0aa8cd2e97 打包时使用到的参数详解,参考这篇: https://debugtalk.com/post/i ...

  10. vs2010自带的报表应用

    1.先创建一个本地的数据库,右键单击你的项目-->选择[Add]--->New Item--->Local database.创建数据库后,添加一个数据表T_student,添加一些 ...