jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别。分享给大家供大家参考,具体如下:
以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件。两个没什么区别,应该是一样的。但昨天一个动画效果才让我见识了,这两个并不能等同。
<div class="wrapper">
<div class="img"></div>
<div class="text"></div>
</div>
<div class="point"></div>
在wrapper上加事件,当鼠标移动到wrapper上的时候让class="point"的层放大。但如果用mouseover和mouseout事件的话,当鼠标移动到wrapper层后,point层会变大,但当鼠标在img和text层之间进行移动的时候,point层会变大变小,不停的变化。这并不是我们想要的结果,我们想要的是只要鼠标在wrapper层上,无论是img还是text上,point就变大,但在鼠标未移出wrapper层的情况下,point层不变小。
慢慢思路也清晰了,我们不用mouseover和mouseout而用hover问题就解决了。
这么简单的问题我们竟然花了好长时间才解决,真是夸张。写篇以作纪念。
补充:后来查找文档发现在jquery源码中有这么一段:
hover: function( fnOver, fnOut ) {return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}
也就是说hover!=mouseover+mouseout。但hover=mouseenter+mouseleave。
转载于:https://www.cnblogs.com/horanly/p/6644300.html
jQuery中hover与mouseover和mouseout的区别分析相关推荐
- hover和mouseover,mouseout的区别
说道hover和mouseover,mouseout的区别,不得不联系到mouseenter,mouseleave. mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触 ...
- [jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别?
[jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别? 在我们深入了解这些方法之前,我们先来一段常见的的HTML,作为我们编写jquery示例方法使 ...
- jQuery中 parent child 与 ance desc 的区别
jQuery中< parent > child >与< ance desc >的区别 (1)< ance desc > 使用$("ance desc ...
- php在类定义一个我静态变量,php中静态类与静态变量用法的区别分析_PHP教程
php中静态类与静态变量用法的区别分析 static是定义一个静态对象或静态变量,关于static 定义的变量或类方法有什么特性我们看完本文章的相关实例后就见分晓了. 1. 创建对象$object = ...
- mouseenter、mouseleave与mouseover、mouseout的区别
mouseenter.mouseleave与mouseover.mouseout都是处理鼠标的移入移出事件,但mouseover.mouseout事件在绑定节点的子节点中也会触发,如下: <!D ...
- jQuery中$(document).ready()和window.onload的区别
$(document) ready()和window onload在表面上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document) ready()和window onlo ...
- jquery 中后代遍历之children、find区别
jquery 中children.find区别 首先看一段HTML代码,如下: 1 <table id="tb"> 2 <tr> 3 <td>0 ...
- JQuery 中load、ready 和 onload 的区别
$(document).ready() 和 window.onload 在表单上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上 $(document).ready() 和 window ...
- jquery 中 $(document).ready() 与window.onload 的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
最新文章
- 第一讲SQL命令的DDL和DML操作讲解
- MySQL02-升级
- Django模型自定义查询管理器
- java项目使用mybatis
- 【数字信号处理】基于DFT的滤波系列1
- Java正则表达式总结
- 使用C语言--编写人机猜数游戏
- Currency Exchange(判断有无正环)
- Redis Cluster部署、管理和测试
- 聚焦惠普质量问题是否带来行业变化?
- 最简单DIY基于ESP8266的国产WS2812智能彩灯④(在网页用按钮点亮)
- 《C语言小游戏之贪吃蛇程序代码》
- 作者用心之作,机器学习总结
- ARM学习之基本概念
- java中mapper层作用_Java的MyBatis框架中Mapper映射配置的使用及原理解析
- 腾讯游戏人生 android,腾讯游戏
- 简明 CSS2.1 参考手册
- 几个常见的B端推广渠道
- 偶数数位求和c语言4286,闽高校计算机二级C语言模拟题.doc
- mysql数据库安装包离线安装
热门文章
- Oracle rollup 关键字用法简介.
- Redhat 5.4 安装Vbox 增强工具失败解决方法。
- RHEL 5.4 安装Oracle 11gR2, 安装篇1...
- java path util,Java URIUtil.canonicalPath方法代码示例
- lstm 根据前文预测词_干货 | Pytorch实现基于LSTM的单词检测器
- android输入法源码分析,基于Android的输入法的设计与实现.doc
- Android检查是否自启动,android – 如何检查我的应用程序是否是默认启动器
- dom4j jar包_XML解析之DOM4j以及XPATH技术
- python 读excel中的sheet_Python使用一些背景颜色读取Excel工作表(xlsx)中的单元格?...
- 减少运维工作量,如何通过 ROS 轻松实现资源编排新方式