jQuery实现hover合成事件的方法


Posted in Javascript onAugust 06, 2015

本文实例讲述了jQuery实现hover合成事件的方法。分享给大家供大家参考。具体如下:

jQuery hover合成事件,利用合成Hover事件制作折合面板,鼠标Hover上面即可展开面板,与Click不尽相同,此特效代码来自锋利的jQuery一书。

运行效果截图如下:

jQuery实现hover合成事件的方法

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery hover合成事件</title>
<script src="jquery1.3.2.js" type="text/javascript"></script>
<style>
*{margin:0;padding:0;} 
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; }
</style>
<script type="text/javascript"> 
$(function(){
 $("#panel h5.head").hover(function(){
  $(this).next("div.content").show();
 },function(){
  $(this).next("div.content").hide(); 
 })
})
</script>
</head>
<body>
<div id="panel">
 <h5 class="head">什么是jQuery?</h5>
 <div class="content">
  jQuery hover合成事件,利用合成Hover事件制作折合面板,鼠标Hover上面即可展开面板,与Click不尽相同,此特效代码来自锋利的jQuery一书。
 </div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript 有用的脚本函数
May 07 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 #Javascript
jQuery实现动画效果circle实例
Aug 06 #Javascript
jQuery动态星级评分效果实现方法
Aug 06 #Javascript
javascript使用输出语句实现网页特效代码
Aug 06 #Javascript
JS实现霓虹灯文字效果的方法
Aug 06 #Javascript
javascript实现网页背景烟花效果的方法
Aug 06 #Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 #Javascript
You might like
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
javascript获取选中的文本的方法代码
2013/10/30 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
Python ZipFile模块详解
2013/11/01 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
python 获取计算机的网卡信息
2021/02/18 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
学生实习介绍信
2014/01/15 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
python中的getter与setter你了解吗
2022/03/24 Python