JQuery入门——事件切换之hover()方法应用介绍


Posted in Javascript onFebruary 05, 2013

1、在JQuery中,有两个方法用于事件的切换,一个方法是hover(),另一个是toggle()。所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换。如一个超级链接标记<a>若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发一个事件,可以用切换事件轻松实现。

2、示例代码

<!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>切换事件hover</title> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$(".clsTitle").hover(function(){ 
$(".clsContent").show(); 
}, 
function(){ 
$(".clsContent").hide(); 
}) 
}) 
</script> 
</head> <body> 
<div class="clsTitle">JQuery简介</div> 
<div class="clsContent">JQuery是由美国人John Resig于2006年创建的一个开源项目,它的主旨是:以更少的代码,实现更多的功能</div> 
</body> 
</html>

3、效果图预览

JQuery入门——事件切换之hover()方法应用介绍
当鼠标移动到JQuery简介时:
JQuery入门——事件切换之hover()方法应用介绍

Javascript 相关文章推荐
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
网络传输协议(http协议)
Nov 18 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
原生JS实现音乐播放器
Jan 26 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 #Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 #Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 #Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 #Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 #Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 #Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 #Javascript
You might like
php mysql数据库操作分页类
2008/06/04 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python函数装饰器实现方法详解
2018/12/22 Python
python list转置和前后反转的例子
2019/08/26 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
校运会广播稿100字
2014/01/27 职场文书
新春文艺演出主持词
2014/03/27 职场文书
个人租房协议书样本
2014/10/01 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
运动会主持词大全
2015/07/02 职场文书
Django实现翻页的示例代码
2021/05/24 Python