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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
详解vue中computed 和 watch的异同
Jun 30 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学习之PHP表达式
2006/10/09 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
javascript连续赋值问题
2015/07/08 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
python动态视频下载器的实现方法
2019/09/16 Python
pandas数据拼接的实现示例
2020/04/16 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
研究生简历自我评
2015/03/11 职场文书
护士旷工检讨书
2015/08/15 职场文书
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server
Java实现带图形界面的聊天程序
2022/06/10 Java/Android
SpringBoot详解执行过程
2022/07/15 Java/Android
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript