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 循环读取JSON数据的代码
Jul 17 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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上传图片、删除图片实现代码
2010/05/12 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
JavaScript的Cookies
2008/01/16 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
Vue render深入开发讲解
2018/04/13 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
Python采用Django开发自己的博客系统
2020/09/29 Python
python模块之paramiko实例代码
2018/01/31 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python调用其他文件函数或类的示例
2019/07/16 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
管理失职检讨书
2014/02/12 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
产品生产计划书
2014/05/07 职场文书
2014年党务公开方案
2014/05/08 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
美丽心灵观后感
2015/06/01 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
ant design charts 获取后端接口数据展示
2022/05/25 Javascript