jquery的hover mouseover mouseout mouseenter mouseleave的区别

1.mouseover mouseout

mouseover - 鼠标指针经过任何子元素都会触发绑定在父元素上的mouseover事件

mouseout - 鼠标指针离开任何子元素时都会触发父元素上的mouseover事件

然后，你把代码拷贝过去try一下，就会有更深刻的理解；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

  $(function (){

       var outer=$("#outer");

       outer.mouseover(function (){

           alert('outer mouseover');

       }).mouseout(function (){

            alert('outer mouseout');

       })

       //当子元素的over 和 out事件发生时，

       //事件会冒泡到父级，也就是说outer上的 over 和 out 会被触发

       var inner=$("#inner");

       inner.mouseover(function (){

             alert('inner mouseover');

       }).mouseout(function (){

              alert('inner mouseout');

       })

  })

</script>

<style type="text/css">

.outer{

    height:100px;

    width:20%;

    background-color:green;

    float:left;

    margin-left:25px;

}

.inner{

    height:50px;

    width:60%;

    margin:25px auto;

    background-color:red;

}

</style>

</head>

<body>

  <div id="outer" class="outer">

   <div id="inner" class="inner"></div>

  </div>

</body>

</html>

2.mouseenter mouseleave

mouseenter - 鼠标指针经过绑定的元素时触发事件，经过其子元素时，不会触发事件

mouseleave - 只有当鼠标离开绑定的元素时才会触发该事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

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

<script type="text/javascript">

    $(function (){

       var outer1=$("#outer1");

       outer1.mouseenter(function (){

           alert('outer1 mouseenter');

       }).mouseleave(function (){

            alert('outer1 mouseleave');

       })

       var inner1=$("#inner1");

       inner1.mouseenter(function (){

             alert('inner1 mouseenter');

       }).mouseleave(function (){

              alert('inner1 mouseleave');

       })

  })

</script>

<style type="text/css">

.outer{

    height:100px;

    width:20%;

    background-color:green;

    float:left;

    margin-left:25px;

}

.inner{

    height:50px;

    width:60%;

    margin:25px auto;

    background-color:red;

}

</style>

</head>

<body>

 <div id="outer1" class="outer">

    <div id="inner1" class="inner"></div>

  </div>

</body>

</html>

houver：

hover！= mouseover+mouseout

hover=mouseenter + mouseleave

  $(function (){

     //我们的hover是这样定义的;

    hover: function( fnOver, fnOut ) {

    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );

     }

  })

jquery的hover mouseover mouseout mouseenter mouseleave的区别的更多相关文章

  1. mouseover,mouseout,mouseenter,mouseleave的区别

    1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...

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

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

  3. 你可能不知道的mouseover/mouseout mouseenter/mouseleave

    mouseover与mouseenter 1. 触发时机 mouseover在被监听的节点与子节点上都会触发 mouseenter只在被监听的节点上触发 本质上是因为mouseenter不能冒泡 2. ...

  4. jQuery里的mouseover与mouseenter事件类型区别

    JQ里面有mouseover和mouseenter  2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...

  5. 理解mouseover,mouseout,mouseenter,mouseleave

    mouseover定义和用法 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用. mouseover() 方法触发 mouseover ...

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

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

  7. jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  8. 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  9. mouseover和mouseenter，mouseout和mouseleave的区别-引发的探索

    相信小伙伴们都用过鼠标事件,比如mouseover和mouseout,mouseenter和mouseleave.它们都分别表示鼠标移入移出. 在使用的过程中,其实一直有个小疑问——它们之间究竟有什么 ...

随机推荐

  1. POJ 3691 DNA repair(AC自动机+DP)

    题目链接 能AC还是很开心的...此题没有POJ2778那么难,那个题还需要矩阵乘法,两个题有点相似的. 做题之前,把2778代码重新看了一下,回忆一下当时做题的思路,回忆AC自动机是干嘛的... 状 ...

  2. rsync服务器的配置和使用

    yum install -y rsyncuseradd rsync -s /sbin/nologinmkdir /backupmkdir /backup1 chown rsync:rsync /bac ...

  3. ThinkPHP之APP_DEBUG给我带来的问题

    1.刚开始学习Thinkphp,在模块分组之后,自己配置了模块分组后,发现打不开网页了,分组配置如图 2.问题现象如图 在处理空模块时写的函数也不能运行 这时我很困惑,一直检查自己的拼写和配置没发现错 ...

  4. 漫谈Java虚拟机（JVM）

    Java 虚拟机(JVM)是可运行 Java 代码的假想计算机. 只要根据 JVM 规范描述将解释器移植到特定的计算机上,就能保证经过编译的任何 Java 代码能够在该系统上运行. 从上图中不难明白J ...

  5. Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval

    定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...

  6. [SHELL进阶] （转）最牛B的 Linux Shell 命令 （四）

    1.查看ASCII码表 man 7 ascii  很多人初学编程都会接触到ascii码的概念,有时候为了查某个符号的ascii值,可能还得翻箱倒柜找出当年的课本?Linux Manpage里面其实包含 ...

  7. GUN485项目的总结

    1.DMA中配置要放在串口的配置后面. 2.DMA有3种中断方式:传输完成.传输一半.传输错误 3.如果要用DMA容易造成串口数据还没发完就把485的控制脚拉低导致数据没发完.解决办法是DMA发送完成 ...

  8. 【转载】wireshark抓包

    两种过滤器 捕捉过滤器:用于决定将什么样的信息记录在捕捉结果中.需要在开始捕捉前设置显示过滤器:在捕捉结果中进行详细查找.他们可以在得到捕捉结果后随意修改 1.捕捉过滤器   语法实例: tcp ds ...

  9. ArcGIS Server发布服务，打包成功，发布失败

    打包成功,发布失败 部分解决方案: ①   查看Server对于源数据所在文件夹是否有读写权限,若无赋予Server账户至少读写权限.读写权限的赋予:对应存放数据的文件夹上右键→属性→ 安全 赋予ar ...

  10. EFDC主控文件efdc.inp文件的xml格式化处理——转载http://blog.sina.com.cn/s/articlelist_1584892573_0_1.html

    在对EFDC模型进行系统集成时,虽然可以通过一行一行读来进行解析处理,但那将是一个繁琐的工作.我们经过xml格式化处理后,再经xsd转成Dataset类对象,那么整个主控文件就是一个数据库表集合,对其 ...