JQuery实现超链接鼠标提示效果的方法


Posted in Javascript onJune 10, 2015

本文实例讲述了JQuery实现超链接鼠标提示效果的方法。分享给大家供大家参考。具体分析如下:

浏览器其实已经自带了超链接提示,只需在超链接中加入title属性就可以了。但是这个提示效果的响应速度是非常缓慢的,大概要延迟1秒左右啊。我们现在需要的是当鼠标移动到超链接的那一瞬间就出现提示。这时就需要移除a标签中的title提示效果,自己动手做一个类似功能的提示。

HTML设计如下:

<p><a href="https://3water.com/" class="tooltip" title="欢迎访问三水点靠木">欢迎访问三水点靠木</a></p>

然后为class为tooltip的超链接添加mouseover和mouseout事件:

$("a.tooltip").mouseover(function (){  
    //显示 title  
}).mouseout(function (){  
    //隐藏 title  
});

实现这个效果的具体思路如下:

1. 当鼠标滑入超链接时, 创建一个div元素,div元素的内容为title属性的值。然后将创建的元素追加到文档中。为它设置x坐标和y坐标,使它显示在鼠标位置的旁边。
2. 当鼠标滑出超链接时,移除div元素。

根据分析的思路,写出如下JQuery代码:

$(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(); //移除  
  });  
});

此时的效果有两个问题:首先是当鼠标滑过后,a标签中的title属性的提示也会出现:其次是设置x坐标和y坐标的问题,由于自制的提示与鼠标的距离太近,有时候会引起无法提示的问题(鼠标焦点变化引起mouseout事件)。

为了移除a标签中的title提示功能,需要进行以下几个步骤:

1. 当鼠标滑入时,给对象添加一个新属性,并把title的值传给这个属性,然后清空属性title的值。

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

2. 当鼠标滑出时,再把对象的myTitle属性的值又赋给属性title。

this.title = this.myTitle;

为什么当鼠标滑出时,要把属性值又赋给属性title呢?因为当鼠标滑出时,需要考虑再次滑入时的属性title值,如果不将myTitle的值重新赋给title属性,当再次滑入时,title的值就为空了。

为了解决第2个问题,需要重新设置提示元素的top和left的值,代码如下所示,为top增加了10px,为left增加了20px:

var x = lO;  
var y = 20;  
$("#tooltip").css({  
    "top": (e.pageY+y) + "px",  
    "left": (e.pageX+x) + "px" 
});

OK,到这里问题都解决了,鼠标超链接提示效果实现。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript 面向对象 命名空间
May 13 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
jquery序列化方法实例分析
Jun 10 #Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 #Javascript
jQuery替换textarea中换行的方法
Jun 10 #Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 #Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 #Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 #Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 #Javascript
You might like
很好用的PHP数据库类
2009/05/27 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Django model select的多种用法详解
2019/07/16 Python
简单了解django索引的相关知识
2019/07/17 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
django迁移文件migrations的实现
2020/03/31 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
护理职业生涯规划书
2014/01/24 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
军训自我鉴定100字
2014/02/13 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
Go 自定义package包设置与导入操作
2021/05/06 Golang
Go语言空白表示符_的实例用法
2021/07/04 Golang