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/ ...
随机推荐
- [Swoole系列入门教程 2] 入门级的Swoole的demo.服务端与客户端
- wampserver配置服务
搭建服务器 windows下: 安装`WampServer`软件 1.什么是WampServer: WampServer,一般称之为 WAMP ,就是Windows Apache Mysql PHP集 ...
- light oj 1037 状压dp
#include <iostream> #include <cstdlib> #include <cstring> #include <queue> # ...
- 【Redis缓存机制】1.Redis介绍和使用场景
(1)持久化数据库的缺点平常我们使用的关系型数据库有Mysql.Oracle以及SqlServer等,在开发的过程中,数据通常都是通过Web提供的数据库驱动来链接数据库进行增删改查. 那么,我们日常使 ...
- jeecms各种标签类（大部分，并没有包含一些其他的如text_cut html_cut之类）
软件包 comjeecms.cms.action.directive 类摘要 ChannelDirective 栏目对象标签 ChannelListDirective 栏目列表标签 ChannelPa ...
- webService cxf学习
1.首先去官网下载cxf包 http://archive.apache.org/dist/cxf/ 记住要选.zip结尾 大概40兆的样子 2.把上边的包都放项目里.如果你用的jeecg框架,那它自带 ...
- 如何提高英语听力（内容摘自NECCS）+ 乘法表
乘法表 print('\n'.join([' '.join(['%s*%s=%-2s'%(y,x,x*y) for y in range(1,x+1)]) for x in range(1,10)]) ...
- LC327 Count of Range Number
这一题,我们使用了分治法. 首先看时间复杂度为o(n^2),比较naïve的方法: 使用一个数组sum[],长度为原数组长度+1,每一个元素sum[i]为原数组中index0~i-1之和,显然当sum ...
- H5C3--边框阴影box-shadow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端路由的实现(三) —— History的pushState和replaceState用法
HTML5中history提供的pushState, replaceState这两个API.它们提供了操作浏览器历史栈的方法. pushState能够在不加载页面的情况下改变浏览器的URL.这个方法接 ...