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 相关文章推荐
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
vue实现百度搜索功能
Dec 28 Javascript
vue+canvas实现拼图小游戏
Sep 18 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
将数组写入txt文件 var_export
2009/04/21 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
Exjs 入门篇
2010/04/07 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python重新引入被覆盖的自带function
2014/07/16 Python
Python中的super()方法使用简介
2015/08/14 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
python机器人运动范围问题的解答
2019/04/29 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
tensorflow自定义激活函数实例
2020/02/04 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
体育教师自荐信范文
2013/12/16 职场文书
研究生毕业鉴定
2014/01/29 职场文书
团代会宣传工作方案
2014/05/08 职场文书
代收款委托书范本
2014/10/01 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python