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/ ...
随机推荐
- rsync+sersync
Environmental introduction System Kernel : -.el6.x86_64 Source Server : 192.168.7.1 Target Server : ...
- RuntimeError: You called this URL via POST, but the URL doesn’t end in a slash and you have APPEND_SLASH set.
做公众号测试的时候,发现了个问题: 提交表单报错:RuntimeError: You called this URL via POST, but the URL doesn’t end in a sl ...
- PAT甲级——A1047 Student List for Course
Zhejiang University has 40,000 students and provides 2,500 courses. Now given the registered course ...
- C++11的for循环的新用法
字符串 string str = "this is a string"; for(auto ch : str) cout << ch << endl; 等价 ...
- MySQL系列(八)--数据库分库分表
在互联网公司或者一些并发量比较大的项目,虽然有各种项目架构设计.NoSQL.MQ.ES等解决比较高的并发访问,但是对于数据库来说,压力 还是太大,这时候即使数据库架构.表结构.索引等都设计的很好了,但 ...
- vue 安装 fontawesome
查看最新版的fontawesome 信息: https://github.com/FortAwesome/vue-fontawesome 搜索图标 :https://fontawesome.com/i ...
- Idea代理设置与Java程序的代理设置
最近在学习WebService的过程中,为了弄清楚发送和接收的包的数据结构,使用Fiddler抓取包的数据.开始先配置了Idea的代理设置,但执行Java代码发送请求时,依然无法在Fiddler中抓取 ...
- 读书笔记--Head First C#目录
1.c#助你快速开发2.都只是代码3.对象4.类型与引用5.封装6.继承7.接口与抽象类8.枚举与集合9.读/写文件10.异常处理11.事件与委托12.复习与预习13.控件与图片14.captain ...
- grpc入门2
rpc-gateway使用(同时提供rpc和http接口) 介绍第三方库 https://github.com/grpc-ecosystem/grpc-gateway 在grpc之上加一层代理并转发, ...
- 常用长度单位PX/EM/PT/百分比转换公式与对照表
PX.PT.EM.ex和in等都是我们常用的长度单位,尤其在网页的字体大小中经常用到.但是你知道PX.PT和EM之间是如何进行准换的吗?这里icech为大家找到了一个px.pt.em和percent大 ...