记得自己引入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. Hibernate中对象的3种状态：瞬时态、持久态、脱管态

    Hibernate的对象有3种状态,分别为:瞬时态(Transient). 持久态(Persistent).脱管态(Detached).处于持久 态的对象也称为PO(Persistence Objec ...

  2. 写一个函数reverseList，该函数能够接受一个List，然后把该List 倒序排列。 例如：  List list = new ArrayList();  list.add(“Hello”);  list.add(“World”);  list.add(“Learn”); //此时list 为Hello World Learn  reverseList

    package homework004; import java.util.ArrayList; import java.util.List; public class Daoxu { public ...

  3. 如何避免regionServer宕机

    为什么regionserver 和Zookeeper的session expired? 可能的原因有 1. 网络不好. 2. Java full GC, 这会block所有的线程.如果时间比较长,也会 ...

  4. Ubuntu 安装 Courier New字体

    apt-get install ttf-mscorefonts-installer  它的本质是安装 Courier New字体 安装的时候会出现一个协议 按TAB键 ,可以选中<确定>按 ...

  5. uva 11246 - K-Multiple Free set(数论)

    题目链接:uva 11246 - K-Multiple Free set 题目大意:给定n,k.求一个元素不大于n的子集,要求该子集的元素尽量多,而且不含两个数满足a∗k=b. 解题思路:容斥原理.f ...

  6. android自动填充短信验证码

    自动拦截短信实际上就是在系统注册一个BroadcastReceiver,然后通过设置拦截短信的: filter.addAction("android.provider.Telephony.S ...

  7. C++和python使用struct传输二进制数据结构来实现

    网络编程问题往往涉及二进制数据的传输.在C++经常使用的传输是文本字符串和分组结构. 假设该数据可以预先送入连续的内存区域,然后让send函数来获得的第一个地址,这一块连续的内存区就能完成传输数据.文 ...

  8. iOS开发——新特性OC篇&IOS9 系统新特性

    IOS9 系统新特性 2015年6月89号凌晨召开的WWDC 2015苹果开发者大会发布了全新的iOS 9系统,PC6小编今天给大家整理了这次iOS9的系统更新带来了哪些新的功能与升级,本次新功能一览 ...

  9. 5.6 太多分区引起OOM

    一个月之前,Scott和同事们发现公司有一个MySQL MHA集群的master(假设master机器名为hostA)每隔一周左右就会挂一次(指MySQL挂掉),在几周内,MHA来回切了好几次. 按照 ...

  10. 列式存储 V.S. 行式存储

    列式数据库 http://zh.wikipedia.org/wiki/%E5%88%97%E5%BC%8F%E6%95%B0%E6%8D%AE%E5%BA%93 列式存储与行式存储 http://my ...