记得自己引入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. sql存储过程exec执行字符串select 的区别

    USE [GuangHong]GO/****** Object: StoredProcedure [dbo].[st_MES_SelInspctDetail] Script Date: 11/23/2 ...

  2. iOS UDID和UUID详解

    这篇是普及知识来了,纯属消遣时间,有需要的可以遛一遛. UDID的全名为 Unique Device Identifier :设备唯一标识符.从名称上也可以看出,UDID这个东西是和设备有关的,而且是 ...

  3. C++ 变量初始化规则

    1.定义变量的时候,如果没有初始化,它的值是什么呢? 它的值取决于变量的类型和变量定义的位置. 2.考虑基本类型的变量,定义时没有初始化.如果定义在方法外部,初始化为0,如果定义在方法内部,不被初始化 ...

  4. SVN 中trunk、branches、tags都什么意思？

    1.trunk是主分支,是日常开发进行的地方. 2.branches是分支.一些阶段性的release版本,这些版本是可以继续进行开发和维护的,则放在branches目录中.又比如为不同用户客制化的版 ...

  5. Webx学习（一）

    什么是webx Webx3_Guide_Book中是这样介绍的: Webx是一套基于Java Servlet API的通用Web框架. Webx致力于提供一套极具扩展性的机制.来满足Web应用不断变化 ...

  6. web运维第一篇:nginx配置文件详解笔记

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  7. iOS开发——屏幕适配篇&Masonry详解

    Masonry详解 前言 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-ip ...

  8. android学习日记26--AIDL之进程间的通信

    1.AIDL介绍 AIDL:Android Interface Definition Language,即Android接口定义语言. 由于每个应用程序都运行在自己的进程空间,并且可以从应用程序UI运 ...

  9. Jordan Lecture Note-8: The Sequential Minimal Optimization Algorithm (SMO).

    The Sequential Minimal Optimization Algorithm (SMO) 本文主要介绍用于解决SVM对偶模型的算法,它于1998年由John Platt在论文“Seque ...

  10. java跨平台性分析

    实不相瞒,Java是我见过的执行效率最低的程序设计语言,前不久在CSDN论坛上有个评测,计算9999的阶乘,同样的循环算法,Java的耗时是.NET的5倍.我以前很喜欢Serv-U,自从它用Java重 ...