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全部源代码
May 04 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
vue.js+element 默认提示中英文操作
Nov 11 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
ADODB类使用
2006/11/25 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php实现简单四则运算器
2020/11/29 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python求导数的方法
2015/05/09 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
如何唤起类中的一个方法
2013/11/29 面试题
如何定义一个可复用的服务
2014/09/30 面试题
毕业生自荐信
2013/12/14 职场文书
升职自我推荐信范文
2015/03/25 职场文书
党小组评议意见
2015/06/02 职场文书
法制工作总结2015
2015/07/23 职场文书