Jquery中的DOM操作 (十.超链接提示效果)
2017-03-07 18:18
603 查看
$(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>"; $("body").append(tooltip); $("#tooltip").css({"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"}); }); });
<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="自带提示1.">自带提示1</a></p> </body>
<style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } p{ clear:both; margin:0; padding:.5em 0; } /* tooltip */ #tooltip{ position:absolute; border:1px solid #333; background:#f7f5d1; padding:1px; color:#333; display:none; } </style>
相关文章推荐
- jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
- Jquery中的DOM操作 (十一.图片放大提示效果)
- jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
- 网站超链接和图片提示效果(jquery)
- jQuery开发之超链接提示效果和图片提示效果
- jquery实现网站超链接和图片提示效果
- JQuery实现超链接鼠标提示效果的方法
- jquery-纯jQuery制作网站超链接和图片提示效果
- JQuery实现超链接鼠标提示效果的方法
- jquery实现的用户注册表单提示操作效果代码分享
- JQuery实现超链接鼠标提示效果的方法
- jQuery实现的超链接提示效果示例【附demo源码下载】
- jquery实现网站超链接和图片提示效果
- jquery实现网站超链接和图片提示效果
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
- jquery实现的用户注册表单提示操作效果代码分享
- JQuery实现超链接鼠标提示效果
- 基于JQuery实现的对删除操作超链接的确认框提示
- JQuery 学习笔记(一)超链接和图片提示效果