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和JQuery实用代码片段(一)
Apr 07 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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发电子邮件
2006/10/09 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
28个JS验证函数收集
2010/03/02 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
js实现产品缩略图效果
2017/03/10 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Python安装第三方库的3种方法
2015/06/21 Python
Python模块的制作方法实例分析
2019/12/21 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
《观舞记》教学反思
2014/04/16 职场文书
安全协议书
2014/04/23 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
庆祝国庆节标语
2014/10/09 职场文书
房屋租赁协议书
2014/10/18 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
行政处罚事先告知书
2015/07/01 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书