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支持事件冒 ...
随机推荐
- Asp.net Mvc Ajax.BeginForm提交表单
之前Mvc中一直用Html.BeginForm提交表单,即如下: @using (Html.BeginForm("Add", "News", FormMetho ...
- Oracle 11g服务详细介绍及哪些服务是必须开启的
成功安装Oracle 11g后,共有7个服务,这七个服务的含义分别为: 1. Oracle ORCL VSS Writer Service: Oracle卷映射拷贝写入服务,VSS(Volume Sh ...
- 1-3-编译Linux内核
1-3-编译Linux内核 1.将Linux源码包拷贝到共享文件夹. 2.进入共享文件夹. 3.解压,命令#tar xvfj Kernel_3.0.8_TQ210_for_Linux_v2.2.tar ...
- 微信小程序 - 表单验证插件WxValidate使用
插件下载地址及官方文档:https://github.com/skyvow/wx-extend 具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/w ...
- tp5Auth权限实现
原文地址:https://blog.csdn.net/qq_33257081/article/details/79137190 下面本人为大家讲解一下如何实现auth权限, 第一步,新建Auth.ph ...
- 将中文字符串分割为数组 解决str_split中文乱码php
首先来介绍str_split()这个函数: 它的作用是将字符串分割为数组: 例如: $str='abcde';str_plite($str); 打印结果如下:Array( [0] => a ...
- 拖拽控件java版
Button vv = new Button("vvvv"); DragSource.getDefaultDragSource().createDefaultDragGestur ...
- \Temporary ASP.NET Files\root\文件不断增长,如何处理?
很久没有写博了.最近半年除了忙活布置新家和过年期间走亲访友之外,都是在公司处理一些项目中的杂事:连家里买的很多书都停下来没看了,感觉这段时间在事业和学习上一直都是忙忙碌碌,却又碌碌无为. 吐槽完,说正 ...
- 深入理解Java虚拟机2-chap3-斗之气9段
一.GC需要完成三件事 哪些内存需要回收:找出不需要使用的对象 什么时候回收:JVM空闲/堆内存紧张 如何回收:回收垃圾的策略 二.寻找已死对象:第一件事 判断对象是否存活算法 1.引用计数算法 原理 ...
- sqli-labs(二)
第二关:sqli-labs的第二关是有报错信息的int类型的sql注入,输入id=1'后也会报错,如下图 可以看到报错信息种显示的是'' limit 0,1' 这处有错,其中前后两个单引符号是报错信 ...