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 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
javascript+xml技术实现分页浏览
Jul 27 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
Javascript实现单例模式
Jan 24 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
js实现简单的倒计时
Jan 28 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
大师制作的中短波矿石收音机
2020/04/02 无线电
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
python机器学习之神经网络实现
2018/10/13 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
台湾专柜女包:KINAZ
2019/12/26 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
一年级班主任感言
2014/03/08 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
个人投资计划书
2014/05/01 职场文书
农村文化活动总结
2014/08/28 职场文书
花木兰观后感
2015/06/10 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
Python pygame实现中国象棋单机版源码
2021/06/20 Python
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang