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 相关文章推荐
javascript数组使用调用方法汇总
Dec 08 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
实现vuex原理的示例
Oct 21 Javascript
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绘制一个扇形的方法
2015/01/24 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
Python的Django框架中的数据过滤功能
2015/07/17 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
django创建超级用户过程解析
2019/09/18 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
软件工程专业推荐信
2013/10/28 职场文书
医学院学生的自我评价分享
2013/11/19 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
我的求职择业计划书
2014/04/04 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
学校师德师风整改方案
2014/10/28 职场文书
预备党员个人总结
2015/02/14 职场文书
民事二审代理词
2015/05/25 职场文书
担保书怎么写 ?
2019/04/22 职场文书
4种方法python批量修改替换列表中元素
2022/04/07 Python
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis