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 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
js中settimeout方法加参数
Feb 28 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
解决vue项目router切换太慢问题
Jul 19 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 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
js实现右键菜单功能
2016/11/28 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
JavaScript实现图片拖曳效果
2017/09/08 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
擅自离岗检讨书
2014/02/11 职场文书
活动总结模板
2014/05/09 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
返乡农民工证明
2015/06/24 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
创业计划书之养殖业
2019/10/11 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python