记得自己引入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. 锋利的jquery第二版学习笔记

    jquery系统学习笔记 一.初识:jquery的优势:1.轻量级(压缩后不到30KB)2.强大的选择器(支持css1.css2选择器的全部 css3的大部分 以及一些独创的 加入插件的话还可支持XP ...

  2. 在eclipse中使用javap工具反汇编

    1.配置 Run---external tools---external tools configurations 选择Program 新建javap运行方式 设置location.workspace ...

  3. MySQL 常用语句 （汇集）

    原文地址:MySql常用语句作者:wuyanle 一.mysql常用语句 创建,删除和最基本查询: 显示数据库  mysql->show databases; 创建数据库  mysql-> ...

  4. ModSecurity CRS笔记[转]

    转自:http://danqingdani.blog.163.com/blog/static/186094195201472304841643/ ModSecurity的规则因为奇怪的正则(可读性差? ...

  5. 用Bootstrap 写了个站点

    近期发现vdceye的站点有些丑陋,就找了一个bootstrap工具,又一次把站点写了一遍 这个工具果然好用 http://vdceye.com/

  6. Nginx+tomcat 做负载均衡

    架构描述 前端一台nginx服务器做负载均衡器,后端放N台tomcat组成集群处理服务,通过nginx转发到后面(注:没做动静分离,静态动态全部都转给tomcat) 优点:实现了可弹性化的架构,在压力 ...

  7. [AngularJS] Transclude -- using what existing in DOM to replace the template elements in directive

    var app = angular.module("phoneApp", []); app.controller("AppCtrl", function($sc ...

  8. android学习日记10--裁剪区域

    裁剪区域 裁剪是画布的一个函数,区域可以是矩形和圆形,也可以通过设置 path 或Region来显示自定义区域,通过不同组合,Android几乎可以支持任意现状的裁剪区域.android.graphi ...

  9. 360开源的类Redis存储系统:Pika

    Pika 是 360 DBA 和基础架构组联合开发的类 Redis 存储系统,完全支持 Redis 协议,用户不需要修改任何代码,就可以将服务迁移至 Pika.有维护 Redis 经验的 DBA 维护 ...

  10. 3D分析之3D要素工具箱（转）

    来自:http://blog.csdn.net/kikitamoon/article/details/8193764 整理有关 ArcGIS 10.1 3D分析工具箱中,3D Feature 工具箱中 ...