记得自己引入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. [二]Json-lib的用法

    1.Json字符串 PrintWriter out=response.getWriter(); // String resultJson="{\"name\":\&quo ...

  2. oscgit

    Gitlab PaaS项目演示 git config --global user.name "你的名字或昵称" git config --global user.email &qu ...

  3. C#程序实现动态调用DLL的研究

    摘 要:在<csdn开发高手>2004年第03期中的<化功大法——将DLL嵌入EXE>一文,介绍了如何把一个动态链接库作为一个资源嵌入到可执行文件,在可执行文件运行时,自动从资 ...

  4. 如何关闭log4j中配置的spring或者hibernate的日志信息

    通常在建立一个web项目的时候,我们通常需要为其配置日志,以便了解启动过程中发生了什么,如果启动过程中发生了错误,则可以很方便的查看错误的信息,但是在项目部署到服务器上时,打印日志信息,需要耗费大量的 ...

  5. Fixed theorems

    Banach Schauder Bourbaki-Kneser

  6. Postfix 电子邮件系统精要

    来源: http://sery.blog.51cto.com/10037/45500 Postfix 电子邮件系统精要 作者:田逸(sery@163.com)  from [url]http://ww ...

  7. NSMutableAttributedString iOS 在UILabel显示不同的字体和颜色(转)

    在项目开发中,我们经常会遇到在这样一种情形:在一个UILabel 使用不同的颜色或不同的字体来体现字符串,在iOS 以后我们可以很轻松的实现这一点,官方的API 为我们提供了UILabel类的attr ...

  8. WINAPI 变量（2861个）

    WINAPI 变量(2861个)   这是从 c:\Program Files\Windows Kits\8.1\Include\um\WinUser.h 这个文件 中提取的 CTRL+F 查看变量所 ...

  9. android Animation 动画效果介绍

    Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动 ...

  10. as。 对象和数组

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