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的简单实现折叠菜单代码
Sep 15 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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读取xml实例代码
2010/01/28 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
splice slice区别
2006/10/09 Javascript
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
详解python中index()、find()方法
2019/08/29 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
澳大利亚商务邀请函
2014/01/17 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
大学生励志演讲稿
2014/04/25 职场文书
中秋晚会策划方案
2014/06/12 职场文书
购房个人委托书范本
2014/10/11 职场文书
2016七夕情人节广告语
2016/01/28 职场文书