说道hover和mouseover,mouseout的区别,不得不联系到mouseenter,mouseleave。

mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触发。

mouseenter,mouseleave是指鼠标指针在穿过/离开被选元素时触发。

举个简单例子:

<div class="wapper">
<h1></h1>
<p></p>
</div>
<div class="buttom"></div>

当鼠标移动到wapper上时类名为buttom的div变大,鼠标离开时恢复原样。

我们使用mouseover,mouseout。当鼠标在<h1>和<p>标签之间来回移动时类名为buttom的div会不断变大,回复原样。

而mouseenter,mouseleave就不会出现这种情况。

而hover的效果等同于mouseenter,mouseleave。

 

hover和mouseover,mouseout的区别的更多相关文章

  1. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

  2. Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别

    定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件. jQuery 1.8 ...

  3. jQuery中hover与mouseover和mouseout的区别分析

    本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...

  4. mouseover,mouseout和mouseenter,mouseleave的区别及适用情况

    在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...

  5. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  6. ie8下$(document).on('mouseover mouseout','ul li',function(){})的bug

    $(document).on('mouseover mouseout','ul li',function(){ if (event.type == 'mouseover') {           c ...

  7. jQuery mouseover,mouseout事件多次执行的问题处理

    控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...

  8. mouseover&mouseout和mouseenter&mouseleave

    mouseenter&mouseleave: 进入被选元素触发,进入被选元素的子元素不会重复触发. mouseover&mouseout: 进入被选元素触发,从被选元素进入其子元素会再 ...

  9. jQuery因mouseover,mouseout冒泡产生的闪烁问题

    由于浏览器的冒泡行为.造成如果在一个DIV元素上同时定义了mouseover,mouseout的时候,当鼠标移动到DIV中的child子元素的时候,就会同时执行了两个操作mouseover和mouse ...

随机推荐

  1. Golang学习 - strings 包

    ------------------------------------------------------------ strings 包与 bytes 包中的函数用法基本一样,不再赘述. 只对 R ...

  2. 修改avd路径

    1.比如你要把AVD放在D盘AndroidAVD下面,则预先在D盘下建立一个文件夹 AndroidAVD.必须的.不然设置了环境变量也没有用,因为模拟器不会自动创建该文件夹. 2.在桌面右击“我的电脑 ...

  3. PetaPoco使用要点

    PetaPoco是一款适用于.Net 和Mono的微小.快速.单文件的微型ORM! 可以从这里获得PetaPoco: NuGet - http://nuget.org/List/Packages/Pe ...

  4. Android(java)学习笔记264:Android下的属性动画高级用法(Property Animation)

    1. 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画 ...

  5. 函数参数选项的处理getopt getopt_long getopt_long_only

    转载:http://blog.chinaunix.net/uid-20321537-id-1966849.html   在头文件中int getopt(int argc,char *argv[], c ...

  6. .net4.0中使用ODP.net访问Oracle数据库(无需安装oracle客户端部署方法)

    1.在没有安装oracle客户端的设备上也能访问服务器上的oracle (通俗的讲就是:开发的应用程序 和 oracle数据库服务器分别在两台电脑上)2.不需要配置TnsNames.Ora文件 开发环 ...

  7. 非常棒的 「Sublime Text 配色/主题」与「编程字体」

    *标有 CT 的是配色 **主题中调用的字体和相配套的Sublime主程序图标可访问GitHub获取 Afterglow https://github.com/YabataDesign/aftergl ...

  8. IO输入输出

    编写TextRw.java的Java应用程序,程序完成的功能是:首先向TextRw.txt中写入自己的学号和姓名,读取TextRw.txt中信息并将其显示在屏幕上. package com.hanqi ...

  9. Discuz!图片查看插件(支持鼠标缩放、实际大小、旋转、下载)

    Discuz!图片查看插件(支持鼠标缩放.实际大小.旋转.下载) 图片查看是网站中的常用功能,用于展示详细的图片.在discuz图片插件的基础上进行了改造,因此这篇文章主要从以下几个方面来讨论图片查看 ...

  10. hibernate的第一个程序

    #建表语句 create database hibernate; use hibernate; create table user( id int primary key, name varchar( ...