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 相关文章推荐
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
vue项目刷新当前页面的三种方法
Dec 04 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
JavaScript canvas实现文字时钟
Jan 10 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/03/08 国漫
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
python 连接sqlite及简单操作
2017/06/30 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
django ajax json的实例代码
2018/05/29 Python
通过Python实现一个简单的html页面
2020/05/16 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
小加工厂管理制度
2014/01/21 职场文书
情况说明书格式范文
2014/05/06 职场文书
职位说明书范文
2014/05/07 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
立志成才演讲稿
2014/09/04 职场文书
公司合作协议范文
2014/10/01 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
社区服务活动感想
2015/08/11 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
详解Python类和对象内容
2021/06/22 Python