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 UI-Draggable 参数集合
Jan 10 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
JS实现随机抽取三人
Nov 06 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 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常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
js 替换
2008/02/19 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
python赋值操作方法分享
2013/03/23 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
Python3 处理JSON的实例详解
2017/10/29 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
如何使用PHP session
2015/04/21 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
行政人员岗位职责
2013/12/08 职场文书
车间统计员岗位职责
2014/01/05 职场文书
家长给老师的道歉信
2014/01/13 职场文书
四群教育工作实施方案
2014/03/26 职场文书
产品设计开发计划书
2014/05/07 职场文书
升职演讲稿范文
2014/05/23 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
实施意见格式范本
2015/06/05 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python