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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>文字提示</title>

<style type="text/css">

#preview{

border:1px solid #cccccc;

background:#9900CC;

color:#fff;

padding:5px;

width: 400px;

height: 400px;

display:none;

position:absolute;

}

</style>

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

</head>

<body>

<a class="preview">把鼠标放到这里1</a>

<br/><br/><br/>

<a class="preview">把鼠标放到这里2</a>

<br/><br/><br/>

<a class="preview">把鼠标放到这里3</a>

<br/><br/><br/>

<a class="preview">把鼠标放到这里4</a>

<br/><br/><br/>

<a class="preview">把鼠标放到这里5</a>

<script type="text/javascript">

this.imagePreview = function(){

xOffset = 10;

yOffset = 30;

$("a.preview").hover(function(e){

$("body").append("<div id='preview'>我是小提示</div>");

$("#preview")

.css("top",(e.pageY - xOffset) + "px")

.css("left",(e.pageX + yOffset) + "px")

.fadeIn("slow");

},

function(){

$("#preview").fadeOut("fast");

});

$("a.preview").mousemove(function(e){

$("#preview")

.css("top",(e.pageY - xOffset) + "px")

.css("left",(e.pageX + yOffset) + "px");

});

};

$(document).ready(function(){

imagePreview();

});

</script>

</body>

</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. Hive Metastore 代码简析

    1.  hive metastore 内部结构 1.1 包结构 从package结构来看,主要的5个package,让我们来看看这几个package的内容 (1) metastorepackage是m ...

  2. eclipse快捷键补充

    编辑相关快捷键 注释          Ctrl + / 快速修复    Ctrl + 1 删除当前行 Ctrl + d 格式化文档 Ctrl + Shift + f 插入空行    Shift + ...

  3. [转] C++ Redistributable Package版本详解

    我们使用的程序常常都需要C++ Redistributable Package的支持.C++ Redistributable Package有众多版本,给安装带了不便. 目前(2013-12-04) ...

  4. Runtime 10种用法

    来源:haojingxue_iOS 链接:http://www.jianshu.com/p/3182646001d1 阅读了多篇运行时的文章,感觉都很不错,从几篇文章里面提取一些个人认为比较重要的,偏 ...

  5. js Uncaught SyntaxError: Unexpected token错误

    今天遇到js报错Uncaught SyntaxError: Unexpected token 不知道是什么原因,并且js还会继续往下执行. 经过排查竟然是在保存行的上面有个if少一个大括号,真是坑爹啊 ...

  6. LVS DR模型

    1,环境 VMWare10, CentOS6.3 2,LVS DR网络规划 所有机器都只需要一张网卡,给Director的eth0网卡起个别名eth0:1即VIP的值:给RealServer的lo网卡 ...

  7. Nginx + Tomcat + Session

    分别下载 tomcat http://archive.apache.org/dist/tomcat/tomcat-7/v7.0.22/bin/apache-tomcat-7.0.22.tar.gz n ...

  8. jquery处理单击和双击事件

    今天做div点击时,需要用到同一div的单击和双击事件,出现问题如下 例子: Html <body> <div id="div_1">单击双击我</d ...

  9. Mysql shell 控制台---mysqlsh

    原创 2016-07-12 杜亦舒 性能与架构 以前登录Mysql的控制台后,使用SQL语言来操作数据库,如 mysql> select * from tablename; Mysql 5.7. ...

  10. javascript笔记01：javascript入门介绍

    javascript是实现网页动态效果的基石,在web开发中扮演重要的角色,被广泛应用的各个领域 (1)网页游戏 (2)地图搜索 (3)股市信息查询 (4)web聊天 …………