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学习笔记之jQuery的事件
Dec 22 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
详细分析React 表单与事件
Jul 08 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
PHP可变变量学习小结
2015/11/29 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
python修改txt文件中的某一项方法
2018/12/29 Python
python数据化运营的重要意义
2019/11/25 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
python实现126邮箱发送邮件
2020/05/20 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
九年级物理教学反思
2014/01/29 职场文书
同学聚会通知书
2015/04/20 职场文书
开学第一周总结
2015/07/16 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python