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 相关文章推荐
JS定时器实例
Apr 17 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
jquery常用操作小结
Jul 21 Javascript
JavaScript函数详解
Feb 27 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
jquery插件实现悬浮的菜单
Apr 24 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
javascript实现yield的方法
2013/11/06 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
Python break语句详解
2014/03/11 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python tkinter组件摆放方式详解
2019/09/16 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
省文明单位申报材料
2014/05/08 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
百日宴上的祝酒词
2015/08/10 职场文书