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 26 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
vue中axios封装使用的完整教程
Mar 03 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 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
JS控制表格隔行变色
2006/06/26 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
SVM基本概念及Python实现代码
2017/12/27 Python
python得到电脑的开机时间方法
2018/10/15 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python assert关键字原理及实例解析
2019/12/13 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
GWT的应用有哪两种部署模式
2012/12/21 面试题
市场专员岗位职责
2014/02/14 职场文书
《三峡》教学反思
2014/03/01 职场文书
鸿星尔克广告词
2014/03/21 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
顶岗实习协议书
2015/01/29 职场文书
团日活动总结格式
2015/05/11 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP