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.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
Vue使用v-viewer实现图片预览
Oct 21 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
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缓存类代码(附详细说明)
2011/06/09 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
四个PHP非常实用的功能
2015/09/29 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
一分钟理解js闭包
2016/05/04 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
Python读取properties配置文件操作示例
2018/03/29 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
python实现AES加密解密
2019/03/28 Python
python3字符串操作总结
2019/07/24 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
2014小学语文教学工作总结
2014/12/17 职场文书
民间借贷被告代理词
2015/05/23 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
java代码实现空间切割
2022/01/18 Java/Android
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫