比较一下几个jquery事件的区别

mouseover() 鼠标进入（进入子元素也触发）

mouseout() 鼠标离开（离开子元素也触发）

mouseenter() 鼠标进入（进入子元素不触发）

mouseleave() 鼠标离开（离开子元素不触发）

hover() 同时为mouseenter和mouseleave事件指定处理函数

用一个有背景的盒子为例子，加上margin-top的动画效果，使鼠标放在盒子上时，让margin-top的值变化而看到盒子上下移动；加上子盒子son后，观察鼠标移入移出小盒子中时的变化；以及解决方案：加入stop()的作用



<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">

		$(function(){

			/*

			进入子元素时会触发，这样写的话有一个bug，当鼠标快速移入移出目标区域时，目标区域会一直变换样式直到实现所有的效果次数。

			加上stop()后，解决上面的bug

			$('#div1').mouseover(function(){

				$(this).animate({marginTop:50});

			});

			$('#div1').mouseout(function(){

				$(this).animate({marginTop:100});

			});

			*/

			/*

			当box盒子里面有一个子元素son盒子时，当鼠标移入移出子元素时，也会触发上面的bug的动画效果

			若想消除这个问题，需要用到mounseenter, mouseleave，这样进入子元素时不会触发bug效果

			$('#div1').mouseenter(function(){

				$(this).stop().animate({marginTop:50});

			});

			$('#div1').mouseleave(function(){

				$(this).stop().animate({marginTop:100});

			});

			*/

			/* 通过hover简写上面的代码，其实就是hover()里面写2个function()作为参数	*/

			$('#div1').hover(function(){

				$(this).stop().animate({marginTop:50});

			},function(){

				$(this).stop().animate({marginTop:100});

			});

		})

	</script>

	<style type="text/css">

		.box{

			width:200px;

			height:200px;

			background-color:gold;

			margin:100px auto 0; //居中

		}

		.son{

			width:100px;

			height:100px;

			background-color:green;

		}

	</style>

</head>

<body>

	<div id="div1" class="box">

		<div class="son"></div>

	</div>

</body>

</html>

　　

 

jquery事件一 ---鼠标移入移出的更多相关文章

  1. Jquery事件：鼠标移入移出(mouseenter,mouseleave)

    前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...

  2. jQuery鼠标移入移出(冒泡版和无冒泡版)

    带冒泡事件的鼠标移入移出(默认的):mouseover和mouseout事件 没有冒泡事件的鼠标移入移出:mouseenter和mouseleave事件

  3. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  4. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  5. Vue 鼠标移入移出事件

    Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style   现在开始代码示例 <template> <div class="pc&qu ...

  6. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

  7. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

  8. Vue中通过鼠标移入移出来添加或取消class样式（active）

     基础知识: 先写一下vue中鼠标移入移出的基础知识,移入的触发事件是 @mouseenter,移出的触发事件是@mouseleave,知道这两个方法就简单了 基础知识的例子 <div clas ...

  9. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

随机推荐

  1. rocketmq--push消费过程

    Rocketmq消费分为push和pull两种方式,push为被动消费类型,pull为主动消费类型,push方式最终还是会从broker中pull消息.不同于pull的是,push首先要注册消费监听器 ...

  2. UIImage分类，设置边框

    #import "UIImage+image.h" @implementation UIImage (image) + (UIImage *)imageWithBorder:(CG ...

  3. Git,GitHub以及GitLab的区别

    Git - 版本控制工具 Github - 一个网站,提供给用户空间创建git仓储,保存用户的一些数据文档或者代码等 GitLab - 基于Git的项目管理软件 Git分布式版本控制系统 Git是一款 ...

  4. kalman处理realsense数据

    代码来自:https://www.cnblogs.com/zjuhjm/archive/2012/12/29/2838472.html import numpy as npimport matplot ...

  5. Linux ftp Command

    一.ftp的get命令和mget命令有何不同? get一次只下载一个文件:mget一次可以下载多个文件,而且支持通配符,需要注意的是在mget的时侯,需要对每一个文件都选择y/n,如果想不交互的下载全 ...

  6. JMeter下载及安装配置完整版

    特别需要注意的时,jdk版本和jmeter版本匹配问题. Jdk1.8对应apache-jmeter-3.3 Jmeter下载及安装配置 本文是在win7环境下安装使用jmeter,jmeter可以运 ...

  7. [C++ Mind Map] class and memory

    class and memory

  8. cmd 中连接mysql时报'mysql'不是内部或外部命令，也不是可运行的程序或批处理文件，该怎么办？

    假设安装的mysql目录是D:\MySQL\MySQL_Server_5.5\第一种方法:如果你打开cmd后直接输入mysql是不行的,需要配置mysql的环境变量,那么就在环境变量中增加D:\MyS ...

  9. 选项“6”对 /langversion 无效；必须是 ISO-1、ISO-2、3、4、5 或 Default

    部署MVC的时候,因为服务器.NET版本是4.5.1,所以在vs将.NET版本降到4.5.1的时候发布报错. 原因:C#6降到C#5导致 解决办法:修改web.config配置 ,编译选项改为comp ...

  10. [GO]并行和并发的区别

    并行:指在同一时刻,有多条指令在多个处理器上同时执行 并发:指在同一时刻只能有一条指令执行,但多个进程指令被快速的轮换执行,使得在宏观上具有多个进程同时执行的效果,但在微观上并不是同时执行的,只有把时 ...