记得自己引入jq插件哦~~~

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>文字提示</title>
  6. <style type="text/css">
  7. #preview{
  8. border:1px solid #cccccc;
  9. background:#9900CC;
  10. color:#fff;
  11. padding:5px;
  12. width: 400px;
  13. height: 400px;
  14. display:none;
  15. position:absolute;
  16. }
  17. </style>
  18. <script type="text/javascript" src="js/jquery-1.12.2.js"></script>
  19. </head>
  20.  
  21. <body>
  22. <a class="preview">把鼠标放到这里1</a>
  23. <br/><br/><br/>
  24. <a class="preview">把鼠标放到这里2</a>
  25. <br/><br/><br/>
  26. <a class="preview">把鼠标放到这里3</a>
  27. <br/><br/><br/>
  28. <a class="preview">把鼠标放到这里4</a>
  29. <br/><br/><br/>
  30. <a class="preview">把鼠标放到这里5</a>
  31.  
  32. <script type="text/javascript">
  33. this.imagePreview = function(){
  34. xOffset = 10;
  35. yOffset = 30;
  36. $("a.preview").hover(function(e){
  37. $("body").append("<div id='preview'>我是小提示</div>");
  38. $("#preview")
  39. .css("top",(e.pageY - xOffset) + "px")
  40. .css("left",(e.pageX + yOffset) + "px")
  41. .fadeIn("slow");
  42. },
  43. function(){
  44. $("#preview").fadeOut("fast");
  45. });
  46. $("a.preview").mousemove(function(e){
  47. $("#preview")
  48. .css("top",(e.pageY - xOffset) + "px")
  49. .css("left",(e.pageX + yOffset) + "px");
  50. });
  51. };
  52. $(document).ready(function(){
  53. imagePreview();
  54. });
  55. </script>
  56. </body>
  57. </html>

简单jquery 鼠标悬停提示效果的更多相关文章

  1. 基于jQuery Tooltips悬停提示效果

    基于jQuery Tooltips悬停提示效果.这是一款基于jquery.tooltipster插件实现的jQuery Tooltips Hover effect特效.效果图如下: 在线预览   源码 ...

  2. JQuery实现一个简单的鼠标跟随提示效果

    效果体验:http://hovertree.com/texiao/jsstudy/2/ 实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建 ...

  3. 兄弟连教育分享：用CSS实现鼠标悬停提示的方法

    兄弟连教育分享:用CSS实现鼠标悬停提示的方法 本文,兄弟连HTML5培训,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实 ...

  4. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  6. jQuery鼠标悬停3d菜单展开动画

    效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现 ...

  7. 基于jQuery鼠标悬停上下滑动导航条

    基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="menu2& ...

  8. 一款基于css3的简单的鼠标悬停按钮

    今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. eclipse 鼠标悬停提示

    如果想要关闭鼠标悬停提示,只要把Window --> Preferences... --> Java --> Editor --> Hovers 把 Combined Hove ...

随机推荐

  1. iOS中的深复制与浅复制

    很多语言中都有深复制浅复制的概念,如C++,ObjC等.简单来说,浅复制就是两个变量指向了同一块内存区域,深复制就是两个变量指向了不同的内存区域,但是两个内存区域里面的内容是一样的. 浅复制示意图: ...

  2. win32进阶必备：多线程同步之互斥锁

    应用多线程互斥锁之前首先简单过一下C程序可能用到的3个创建线程函数: CreateThread,windows系统提供的唯一创建线程API,_beginthread和_beginthreadex都在内 ...

  3. Tokumx 安装指南（做法如同MongoDB）

    安装说明系统环境:Centos-6.3安装软件:mongodb-linux-x86_64-2.2.2.tgz下载地址:http://www.mongodb.org/downloads安装机器:192. ...

  4. linux快速入门 1.1命令行操作

    http://lovesoo.org/linux-command-line-operation.html 1.1命令行操作 目录: <wp_nokeywordlink>Shell简介 &l ...

  5. DHCP Option 60 的理解

    原文地址: http://blog.163.com/chenqioulin_1983/blog/static/83216232010109104430251/   首先还是看看RFC咋说的吧.DHCP ...

  6. delphi 窗体透明

        TransparentColor:=true;    TransparentColorValue:=clFuchsia;    Color:= TransparentColorValue;  ...

  7. [React Fundamentals] Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

  8. Golang－interface（四 反射）

    github:https://github.com/ZhangzheBJUT/blog/blob/master/reflect.md 一 反射的规则 反射是程序执行时检查其所拥有的结构.尤其是类型的一 ...

  9. JavaScript（20）jQuery HTML 加入和删除元素

    jQuery - 加入元素 通过 jQuery,能够非常easy地加入新元素/内容. 加入新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepen ...

  10. as。 对象和数组

    ---恢复内容开始--- http://w3help.org/zh-cn/causes/SJ9011 ---恢复内容结束--- http://zengrong.net/post/5.htm