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脚本代码跑起来。
Jan 09 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
js实现产品缩略图效果
Mar 10 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
python之消除前缀重命名的方法
2018/10/21 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
np.random.seed() 的使用详解
2020/01/14 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
秋季婚礼证婚词
2014/01/11 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
小学生操行评语大全
2014/04/22 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
MySQL 5.7常见数据类型
2021/07/15 MySQL