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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
Postman无法正常返回结果问题解决
Aug 28 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实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
php适配器模式简单应用示例
2019/10/23 PHP
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
React Native中Navigator的使用方法示例
2017/10/13 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python递归法解决棋盘分割问题
2019/07/17 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
师范毕业生自荐信
2013/10/17 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
司机职责范本
2014/03/08 职场文书
安全承诺书范文
2014/03/26 职场文书
安全标语口号
2014/06/09 职场文书
标准毕业生自荐信
2014/06/24 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
python 如何做一个识别率百分百的OCR
2021/05/29 Python
Java的Object类的九种方法
2022/04/13 Java/Android