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 原型与继承说明
Jun 09 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
Angular简单验证功能示例
Dec 22 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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中上传大体积文件时需要的设置
2006/10/09 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
javascript 精粹笔记
2010/05/09 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
理解python多线程(python多线程简明教程)
2014/06/09 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python 构造三维全零数组的方法
2018/11/12 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
大学新闻系求职信
2014/06/03 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers