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(视频与PPT)
Dec 27 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
基于php伪静态的实现详细介绍
2013/04/28 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
小试小程序云开发(小结)
2019/06/06 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
动态创建类实例代码
2009/10/07 Python
跟老齐学Python之list和str比较
2014/09/20 Python
Python编程中的反模式实例分析
2014/12/08 Python
详解Python中的文本处理
2015/04/11 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Python守护线程用法实例
2017/06/23 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
教师师德反思材料
2014/02/15 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
出国英文推荐信
2014/05/10 职场文书
质量主管工作职责
2014/09/26 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
写给老师的保证书
2015/05/09 职场文书