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 中debug方式
Feb 07 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
JavaScript闭包详解
Feb 02 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
js实现复制粘贴的两种方法
Dec 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将向Java靠拢
2006/10/09 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
PHP生成唯一订单号
2015/07/05 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python控制Firefox方法总结
2019/06/03 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
数控专业推荐信范文
2013/12/02 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
教师先进事迹材料
2014/12/16 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis