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中关于indexOf的使用方法与问题小结
Aug 05 Javascript
Ext 今日学习总结
Sep 19 Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
如何基于js判断浏览器版本
Feb 20 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
提取HTML标签
2006/10/09 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
小谈php正则提取图片地址
2014/03/27 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python 自动化表单提交实例代码
2017/06/08 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python 获取项目根路径的代码
2019/09/27 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
企业消防安全制度
2014/02/02 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
绿色环保倡议书
2015/04/28 职场文书