jquery文字提示
2016-02-25 10:19
465 查看
<html> <head> <meta charset="utf-8"> <title>3-2</title> <script type="text/javascript" src="../jquery-1.8.2.min.js"></script> <style> 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> <script type="text/javascript"> $(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(); //移除 }).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>
效果图:
相关文章推荐
- jquery ztree实现模糊搜索功能
- jQuery实现从身份证号中获取出生日期和性别的方法分析
- jquery实现列表上下移动功能
- jquery ztree实现树的搜索功能
- 【经典】jQuery使用大全
- 使用jquery插件实现图片延迟加载--懒加载技术
- jquery ztree异步搜索(搜叶子)实践
- JQuery ztree 异步加载实例讲解
- 使用jQuery页面加载函数启动定时任务
- 解决jquery zclip 插件点击无效的问题
- jquery中trigger引发自定义方法
- jQuery使用contains过滤器实现精确匹配方法详解
- [置顶] jQuery判断checkbox,radio是否选中的3种方法
- jquery中各个事件执行顺序如下:
- 简易jQuery插件
- 利用jQuery中的ajax分页实现代码
- jquery zTree异步加载简单实例讲解
- jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
- Jquery zTree 树控件异步加载操作
- jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)