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 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
原生js实现轮播图特效
May 04 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 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实现获取域名的方法小结
2014/11/05 PHP
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
js变换显示图片的实例
2013/04/16 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
完善的jquery处理机制
2016/02/21 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
Python with的用法
2014/08/22 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python如何对实例属性进行类型检查
2018/03/20 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
python字典key不能是可以是啥类型
2020/08/04 Python
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
sealed修饰符是干什么的
2012/10/23 面试题
急诊科护士自我鉴定
2013/10/14 职场文书
国培教师自我鉴定
2014/02/12 职场文书
班主任新年寄语
2014/04/04 职场文书
加入学生会演讲稿
2014/04/24 职场文书
倡议书格式模板
2014/05/13 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
党课主持词大全
2015/06/30 职场文书