JQuery--mouseover()与moseout()的区别
mouseover()与mouseout()区别
普通鼠标移入移出事件
语法:
mouseover()/mouseout()
功能:
当鼠标移入/移出到添加事件的元素或其子元素的时候，都会被触发
!!mouseenter/mouseleave是更好的鼠标移入事件!!
语法：
mouseenter()/mouseleave()
功能：
当鼠标移入/移出到添加事件的元素才会被触发,子元素不会被触发
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 300px;
height: 200px;
background-color: #2AB89A;
border: 1px solid #cc6600;
} .son{
width: 100px;
height: 100px;
background-color:skyblue;
border: 1px solid #fff;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(function () {
// mouseover
/* $('.father').mouseover(function () {
console.log("moseouer");
}); // mouseout
$('.father').mouseout(function () {
console.log("mouseout");
$(this).hide();
});*/ $('.father').mouseenter(function () {
console.log("mouseenter");
}); // mouseout
$('.father').mouseleave(function () {
console.log("mouseleave");
$(this).hide();
});
});
</script>
</head>
<body>
<h1>鼠标移出大盒子的时候才隐藏大盒子</h1>
<div class="father">
外面的老爹
<div class="son">
里面的孩子
</div>
</div>
</body>
</html>
JQuery--mouseover()与moseout()的区别的更多相关文章
- jQuery mouseover与mouseenter的区别
在我们的页面中经常会用到mouseover与mouseout事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseove ...
- jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...
- jquery中mouseover和mouseenter的区别
jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...
- jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
- hover和mouseover，mouseout的区别
说道hover和mouseover,mouseout的区别,不得不联系到mouseenter,mouseleave. mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触 ...
- jquery生产和开发的区别
今天说一下jquery生产和开发的区别,在我们下载jquery的时候,会有两个下载链接,一个是jquery.min.js .迷你版 (生产),另一个是 jquery.js .开发版 .不知道的人可能就 ...
- JQuery this和$(this)的区别及获取$(this)子元素对象的方法
1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的 $() 这 ...
- 转: JQuery this和$(this)的区别及获取$(this)子元素对象的方法
1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的 $() 这 ...
- Jquery中$与$.fn的区别
Jquery中$与$.fn的区别 当今web开发往往离不开Jquery的使用,Jquery以其简洁的使用方式.良好的浏览器兼容性赢得了软件研发同行的青睐,作为其中的一员,自然也不例外,尽管刚开始时很排 ...
- jQuery:mouseover and Increase the Size of an Image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 在xml中对one2many 字段屏蔽 添加项目
在xml中对one2many 字段(mrp_workorder_variation_line_ids) 设置 只有在草稿状态下才能编辑 <field name="mrp_workord ...
- Ad Infinitum 8 - Math Programming Contest
比赛链接 A题 如果当前数是1,那么后面无论是几都会加1或者当后面数是1的时候加2,所以记录一下后面的数中1的个数(加2)即可. 如果当前数是2,那么只有当后面的数为1或者为2时才可以加1,所以再记录 ...
- 使用内部Servlet转发JSP后页面的JS,CSS等资源引入问题的解决
转载自:https://blog.csdn.net/weixin_44353336/article/details/90677792 问题原因 我们在进行web项目开发过程中,经常会在web页面引入一 ...
- C++ Primer 阅读小结
一.变量和基本类型 类型是C++程序设计的基础. 每种类型都定义了其存储空间要求和可以在该类型的所有对象上执行的操作.C++提供了一组基本内置类型,如int.char等.这些类型与它们在机器硬件上的标 ...
- Jmeter运行原理
Jmeter运行原理: JMETER是运行在JVM虚拟机上的,每个进程的开销比loadrunner的进程开销大,如果以进程的方式来运行每台负载机上的进程数量不会允许太多,当有大量并发时就需要大量的负载 ...
- Leetcode448.Find All Numbers Disappeared in an Array找到所有数组中消失的数字
给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. 您能在不 ...
- switch...case...之替换方案一
很多时候,当switch中有N个分支,且分支数已达10+,每个分支都是一个不小的方法体,那我们是不是应该考虑换一种方式来实现这个分支. 而我目前所能想到的是会用到如下几种方法. 1.Action 2. ...
- 阿里云应用高可用服务 AHAS 流控降级实现 SQL 自动防护功能
在影响系统稳定性的各种因素中,慢 SQL 是相对比较致命的,可能会导致 CPU.LOAD 异常.系统资源耗尽.线上生产环境出现慢 SQL 往往有很多原因: 硬件问题.如网络速度慢,内存不足,I/O 吞 ...
- 字符界面总是显示 login incorrect
一般来说出现这样的提示,是因为登陆的密码错误,如果密码中有数字,最好用主键盘输入,用数字键盘会有错误.
- 使用setTimeout函数解决栈溢出问题
下面的代码,如果队列太长会导致栈溢出,怎样解决这个问题并且依然保持循环部分: var list = readHugeList(); var nextListItem = function() { va ...