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/ ...
随机推荐
- kill 3000
杀3000端口,是作为一个web未开发人员经常遇到的事情 所以我今天就分享一下我的杀3000端口秘诀 lsof -i: 先要找到端口 node zcool 20u IPv6 0xdddbb4f6f12 ...
- 深入浅出 Java Concurrency (2): 原子操作 part 1[转]
从相对简单的Atomic入手(java.util.concurrent是基于Queue的并发包,而Queue,很多情况下使用到了Atomic操作,因此首先从这里开始).很多情况下我们只是需要一个简单的 ...
- R语言画图教程之盒形图
R语言画图教程之盒形图 我们之前有分享过一系列的R语言画图代码(PCA图.Pathway图.火山图.RDA图.热图),今天再来补充一个盒形图(箱形图)的代码. 以下代码只是示例,不能直接搬来用哦,注意 ...
- PAT甲级——A1017 Queueing at Bank
Suppose a bank has K windows open for service. There is a yellow line in front of the windows which ...
- sql 书写顺序
SELECT select_list [ INTO new_table ] FROM table_source [ WHERE search_condition ] [ GROUP BY group_ ...
- https://vjudge.net/problem/2198221/origin
https://vjudge.net/problem/2198221/origin逆向思维,原题是人出来,我们处理成人进去,算出来每个人的曼哈顿距离,然后从大到小排序,距离长的先入.走的距离+这个人从 ...
- xhEditor 简单用法
1.下载需要文件包: http://xheditor.com/ 2.解压文件中文件 xheditor-zh-cn.min.js以及xheditor_emot.xheditor_plugins和xhed ...
- 【python之路28】模块python与excel
一.可使用的第三方库 python中处理excel表格,常用的库有xlrd(读excel)表.xlwt(写excel)表.openpyxl(可读写excel表)等.xlrd读数据较大的excel表时效 ...
- python 显示彩色文本
实现过程: 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示是27,用 ...
- WPF内嵌CEF控件，与JS交互
1)安装cefsharp.winform包 打开VS2017,打开nuget,找到cefsharp.winform,安装 问:为什么wpf程序不使用cefsharp.wpf? 答:因为cefwpf 4 ...