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 相关文章推荐
jquery自定义插件开发之window的实现过程
May 06 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
js实现网页定位导航功能
Mar 07 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
用javascript制作qq注册动态页面
Apr 14 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php HandlerSocket的使用
2011/05/02 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
浅析javascript中的事件代理
2015/11/06 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python爬取三国演义的实现方法
2016/09/12 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
规范化管理年活动总结
2014/08/29 职场文书
社保转移委托书范本
2014/10/08 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python