老程序员分享:jquerytooltip事件

简介: 老程序员分享:jquerytooltip事件

"

1 <!doctype html

2 [/span>html

3 [/span>head

4 [/span>meta charset=""utf-8""/>

5 [/span>title

6 [/span>script src=""jquery-1.10.2.min.js""

7

8

9 [/span>body

10 [/span>a href=""#"" title=""请努力学习,未来是属于自己的,把握!"" class=""tooltip""

//代码效果参考:https://v.youku.com/v_show/id_XNjQwNjU2NzYxMg==.html

11 上帝只眷顾懂得的人

12

13

14 [/span>script

15

16 var x=10;

17 var y=20;

18 $("".tooltip"").mouseover(function(e){//function(e)传入事件,全局事件

19 this.myTitle=this.title;//获取当前的title

20 this.title="" ""; //避免原有的title弹出所以设置为空

21 var $tooltip=""""+this.myTitle+""""//创建div节点

22 $(""body"").append($tooltip);//body前追加节点

23 $(""#tooltip"").css({""position"":""absolute"",""top"":(e.pageY+y)+""px"",

24 ""left"":(e.pageX+x)+""px"",""color"":""red""

25 }).show(""fast"");}).mouseout(function(){ //鼠标离开事件e.pageY为鼠标的y坐标,e.pageX为鼠标的X坐标

26 this.title=this.myTitle;

27 $(""#tooltip"").remove();

28 }).mousemove(function(e){ //鼠标移动事件

29 $(""#tooltip"").css({""top"":(e.pageY)+""px"",

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

31 });

32 });

33

34

35

36

rgba(0, 0, 255, 1)""]

37

if you don't try,you will never know!


"
image.png
相关文章
|
Linux 开发工具 数据安全/隐私保护
嵌入式Linux开发环境搭建之十---阿里云服务器购买及Linux开发环境搭建
嵌入式Linux开发环境搭建之十---阿里云服务器购买及Linux开发环境搭建
221 0
|
10月前
|
存储 机器学习/深度学习 SQL
大数据处理与分析技术
大数据处理与分析技术
524 2
|
6月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
人工智能 安全 Android开发
《鸿蒙系统AI优势:超越安卓,开启智能新篇》
鸿蒙系统在人工智能浪潮中展现出独特优势。其系统级原生智能简化开发,AI大模型接入提升智慧交互,微内核架构保障安全稳定,分布式架构实现多设备无缝协同,隐私保护措施全面,智能检测实时防护。相比安卓,鸿蒙在开发效率、智能性、安全性及用户体验上更具竞争力,为用户带来更智能、便捷、安全的使用体验。
563 6
|
10月前
|
敏捷开发 监控 数据可视化
一文带你了解:六款适合PC端的工时管理工具
在项目管理中,工时管理软件能实时反映项目各任务的进展情况。管理者可以通过查看员工在每个任务上的工时投入,判断任务是否按计划推进。若发现某个任务工时投入远超预期但进度缓慢,就可以及时介入调查原因,是遇到技术难题、资源不足还是人员协作问题等,进而采取相应措施加以解决,确保项目能按时交付。
|
Java Linux Maven
IDEA maven 设置成国内源,阿里源,清华大学源
IDEA maven 设置成国内源,阿里源,清华大学源
IDEA maven 设置成国内源,阿里源,清华大学源
|
运维 Kubernetes Cloud Native
从构建到治理,业内首本微服务治理技术白皮书正式发布(含免费下载链接)
历经半年多的筹备,长达379页的《微服务治理技术白皮书》,于今天发布,这可能是业内首本聚焦微服务治理业务领域的白皮书,希望通过本书,能对高效解决云原生架构下的微服务治理难题,起到一点点作用。
从构建到治理,业内首本微服务治理技术白皮书正式发布(含免费下载链接)
|
存储 弹性计算 编解码
阿里云服务器4核8G配置最新价格及带宽和云盘收费价格整理
本文介绍了阿里云服务器4核8G配置最新的租用费用,包含收费标准及最新活动价格和公网带宽和系统盘收费情况以及后续升级续费最新优惠政策等。
2159 0
阿里云服务器4核8G配置最新价格及带宽和云盘收费价格整理

热门文章

最新文章