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 跳转代码集合
Dec 03 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
Vuex中的Mutations的具体使用方法
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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
javascript打印输出json实例
2013/11/11 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
简明 Python 基础学习教程
2007/02/08 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
详解小白之KMP算法及python实现
2019/04/04 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
面向对象概念面试题(.NET)
2016/11/04 面试题
工商管理系学生的自我评价分享
2013/11/29 职场文书
银行存款证明样本
2014/01/17 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
介绍信怎么写
2015/01/30 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL