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/ ...
随机推荐
- leetcode 49 Group Anagram
lc49 Group Anagram 逻辑很简单,就是统计字母出现次数,然后将完全相同的字符串放入同一list 关键是怎么实现 统计的部分,可以通过将string排序,Arrays.sort(),或者 ...
- 官网下载eclipse
百度搜索eclipse,点击官网链接进入官网 进入官网点击Download Packages 根据自己需要选择对应的版本 选择对应的版本进入下图下载页面,然后点击下载即可 下载完成,解压zip包即可使 ...
- 微信小程序之组件的集合（五）
这个是学习复杂的组件的封装的,在课程中,主要实现的是书单上方的搜索功能组件的开发,这个应该是较之前的组件是有一定难度的,但是现在学到现在,感觉前端的内容和后端的内容比较起来,还是比较容易的,而且好多内 ...
- NOIP2016提高A组 A题 礼物—概率状压dp
题目描述 夏川的生日就要到了.作为夏川形式上的男朋友,季堂打算给夏川买一些生 日礼物. 商店里一共有n种礼物.夏川每得到一种礼物,就会获得相应喜悦值Wi(每种礼物的喜悦值不能重复获得). 每次,店员会 ...
- BZOJ 1874: [BeiJing2009 WinterCamp]取石子游戏
Time Limit: 5 Sec Memory Limit: 162 MB Submit: 957 Solved: 394 [Submit][Status][Discuss] Description ...
- Office2010 破解（Microsoft Toolkit 2.4.3.exe）
这两天破解刚安装好的office2010,总是报错 刚才重新下载了Microsoft Toolkit 2.4.3.exe工具后,破解成功,操作如下: 选择office按钮后,如下操作,
- 装配SpringBean(四)--注解装配之组件扫描
前两篇文章我总结了通过XML方式装配bean的实现方式,虽然比较简单,但是需要配置很多,很多时候我们都会使用注解进行装配.使用注解的方式可以减少XML的配置,既能实现XML的功能,还提供了自动装配功能 ...
- WhaleCTF之web-http呀
WhaleCTF之web-http呀 前往题目 不多说,看看源码 源码没有,抓包,发一下,也没有 猜测不是这个页面 burp抓包,把html改成php 发一下,在返回源码看到flag~
- Linux下ps -ef和ps aux的区别及格式详解-转
原文:https://www.linuxidc.com/Linux/2016-07/133515.htm Linux下显示系统进程的命令ps,最常用的有ps -ef 和ps aux.这两个到底有什么区 ...
- 提高scrapy的抓取效率
增加并发 默认scrapy开启的并发线程的个数是32个,可以适当的进行增加.在settings中进行设置CONCURRENT_REQUESTS=100 降低日志级别 在运行的时候,会有大量的日志信息的 ...