jQuery事件--mouseover()、mouseout()、mouseenter()和mouseleave()
mouseover([[data],fn])
概述
当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用
注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件
参数
fn 在每一个匹配元素的mouseover事件中绑定的处理函数
[data],fn data:mouseover([Data], fn) 可传入data供函数fn处理;fn:在每一个匹配元素的mouseover事件中绑定的处理函数
mouseout([[data],fn])
概述
当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。
注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件
参数
fn 在每一个匹配元素的mouseout事件中绑定的处理函数
[data],fn data:mouseout([Data], fn) 可传入data供函数fn处理;fn:在每一个匹配元素的mouseout事件中绑定的处理函数
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<title></title>
<script type="text/javascript">
x = 0;
y = 0;
$(document).ready(function() {
$("#over").mouseout(function() {
$("#over span").text(x += 1);
});
$("#out").mouseover(function() {
$("#out span").text(y += 1);
});
});
</script>
</head> <body>
<div id="over" style="background-color:lightgray;padding:20px;width:300px;float:left;position: relative;top: 10px;left: 10px;">
<h2 style="background-color:white;">触发Mouseover 事件:<span></span></h2>
</div>
<br />
<div id="out" style="background-color:lightgray;padding:20px;width:300px;float:left;position: relative;left: -330px;top: 150px;">
<h2 style="background-color:white;">触发 Mouseout 事件:<span></span></h2>
</div>
</body> </html>
mouseenter([[data],fn])
概述
当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
参数
fn 在每一个匹配元素的mouseenter事件中绑定的处理函数。
[data],fn data:mouseenter([Data], fn) 可传入data供函数fn处理;fn:在每一个匹配元素的mouseenter事件中绑定的处理函数
mouseleave([[data],fn])
概述
当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。
参数
fn 在每一个匹配元素的mouseleave事件中绑定的处理函数。
[data],fn data:mouseleave([Data], fn) 可传入data供函数fn处理;fn:在每一个匹配元素的mouseleave事件中绑定的处理函数
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<title></title>
<script type="text/javascript">
x = 0;
y = 0;
$(document).ready(function() {
$("#over").mouseenter(function() {
$("#over span").text(x += 1);
});
$("#out").mouseleave(function() {
$("#out span").text(y += 1);
});
});
</script>
</head> <body>
<div id="over" style="background-color:lightgray;padding:20px;width:300px;float:left;position: relative;top: 10px;left: 10px;">
<h2 style="background-color:white;">触发Mouseenter 事件:<span></span></h2>
</div>
<br />
<div id="out" style="background-color:lightgray;padding:20px;width:300px;float:left;position: relative;left: -330px;top: 150px;">
<h2 style="background-color:white;">触发 Mouseleave 事件:<span></span></h2>
</div>
</body> </html>
jQuery事件--mouseover()、mouseout()、mouseenter()和mouseleave()的更多相关文章
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
- jquery的hover mouseover mouseout mouseenter mouseleave的区别
jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...
- jquery中mouseover和mouseenter的区别
jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...
- jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout
hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...
- mouseout和mouseover、mouseenter和mouseleave
在前端开发中经常会碰到当鼠标放到一个元素上时会弹出你一个元素,鼠标离开那个弹出元素后隐藏.这类效果一般要用到一些鼠标事件,一类是mouseout和mouseover,另一类是mouseen ...
- mouseover,mouseout,mouseenter,mouseleave的区别
1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...
- 你可能不知道的mouseover/mouseout mouseenter/mouseleave
mouseover与mouseenter 1. 触发时机 mouseover在被监听的节点与子节点上都会触发 mouseenter只在被监听的节点上触发 本质上是因为mouseenter不能冒泡 2. ...
- jQuery因mouseover,mouseout冒泡产生的闪烁问题
由于浏览器的冒泡行为.造成如果在一个DIV元素上同时定义了mouseover,mouseout的时候,当鼠标移动到DIV中的child子元素的时候,就会同时执行了两个操作mouseover和mouse ...
- jQuery关于mouseover和mouseenter的区别
原生的mouseenter是dom3级的事件,对于jQuery等一些框架已经实现了这个事件.但是它到底跟mouseover有什么区别? jQuery在实现这两个事件的时候,mouseover支持事件冒 ...
随机推荐
- Tacacs+认证详细调研
1 .TACACS+概述 1.1 什么是TACACS+ TACACS+(Terminal Access Controller Access Control System,终端访问控制器控制系统协议 ...
- Lua: 给 Redis 用户的入门指导(转)
add by zhj : Lua与Multi/EXEC的功能比较像,在执行过程中,redis不会执行其它命令,这就不会有并发访问的问题, 这是非常好的.但Multi/EXEC要求所有命令都是独立的,后 ...
- 关于Sentry(转)
原文:http://blog.csdn.net/largetalk/article/details/8640854 1. Sentry介绍及使用 Sentry is a realtime event ...
- oracle中not in 和 in 的替代写法
-- not in 的替代写法select col from table1 where col not in(select col from table2); select col,table2.co ...
- oracle常见的执行计划
访问表的执行计划: 全表扫描:TABLE ACCESS FULL ROWID扫描:TABLE ACCESS BY USER ROWID (ROWID来源于用户在where条件中的指定)或 TABLE ...
- FlashFXP+FileZillaServer
从远程站点里拷贝文件到本地时,如果文件太大,通常会非常耗时,再加上若需要拨VPN,网络上的任何波动都会造成传输文件失败从头来过. 运用FlashFXP和FileZillaServer这两个工具,它拥有 ...
- OC通讯录选择封装
ContactsService.h代码 #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> //block返回选 ...
- shell进阶函数
函数的定义和用途 函数function是由若干条shell命令组成的语句块,实现shell代码的重用和模块化编程. 函数和shell程序的异同点 它与shell程序形式上是相似的,不同的是它不是一个单 ...
- Windows下安装centOS7双系统总结
首先,按照网络教程,使用硬盘安装模式(失败): 一.使用分盘工具(easeUS Partion Master)分出一块未使用的空间,为安装centOS和保存镜像文件作准备. 二.将分出来的一部分空格, ...
- 十步完全理解SQL(转载)
1. SQL 是一种声明式语言 首先要把这个概念记在脑中:“声明”. SQL 语言是为计算机声明了一个你想从原始数据中获得什么样的结果的一个范例,而不是告诉计算机如何能够得到结果.这是不是很棒? (译 ...