jQuery实现鼠标悬停显示提示信息窗口的方法


Posted in Javascript onApril 30, 2015

本文实例讲述了jQuery实现鼠标悬停显示提示信息窗口的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标悬停显示提示信息窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.contact{width:100px;height:15px;
margin:20px 0 0 50px;background-color:#CCCCCC;
text-align:center;
}
.us{display:none;width:300px;height:40px;
padding:10px;position:relative;top:0px;left:50px;
background-color:#0099FF;
}
</style>
<script src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".contact").mouseover(function(){
$(".us").show("slow");
$(".contact").mouseout(function(){
$(".us").hide("slow");
});
});
})
</script>
</head>
<body>
<div class="contact">联系我们</div>
<div class="us">提示内容!提示内容!提示内容!</div>
<div>https://3water.com/</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
jQuery层动画定位滑动效果的方法
Apr 30 #Javascript
jquery中$each()方法的使用指南
Apr 30 #Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 #Javascript
javascript实现checkbox全选的代码
Apr 30 #Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 #Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 #Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 #Javascript
You might like
PHP与javascript对多项选择的处理
2006/10/09 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php实现读取内存顺序号
2015/03/29 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
pygame实现弹力球及其变速效果
2017/07/03 Python
python中 logging的使用详解
2017/10/25 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
教师党员公开承诺书
2014/03/25 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
市场营销计划书
2015/01/17 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书