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限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 Javascript
利用JavaScript写一个简单计算器
Nov 27 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扩展函数
2006/10/09 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
幼儿园国庆节活动方案
2014/02/01 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
2014年手术室工作总结
2014/11/26 职场文书
新员工入职感想
2015/08/07 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技