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 10 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 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如何抛出异常处理错误
2011/03/02 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
angularJS模态框$modal实例代码
2017/05/27 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
简析Python的闭包和装饰器
2016/02/26 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
django自带调试服务器的使用详解
2019/08/29 Python
Python用input输入列表的实例代码
2020/02/07 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
学python爬虫能做什么
2020/07/29 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
应聘自荐信
2013/12/14 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
教师师德承诺书
2014/03/26 职场文书
员工工作自我评价
2014/09/26 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
2015年度党员个人总结
2015/02/14 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
Python实现滑雪小游戏
2021/09/25 Python
Python+tkinter实现高清图片保存
2022/03/13 Python