mouseover和mouseout对应 //鼠标移入移出触发该元素及子元素

　mouseenter和mouseleave对应 //鼠标移入移出只触发该元素

看完例子即可知道其区别：

mouseover与mouseenter不同：

 <html>

 <head>

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

 <script type="text/javascript">

 x=0;

 y=0;

 $(document).ready(function(){

   $("div.over").mouseover(function(){

     $(".over span").text(x+=1);

   });

   $("div.enter").mouseenter(function(){

     $(".enter span").text(y+=1);

   });

 });

 </script>

 </head>

 <body>

 <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>

 <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>

 <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">

 <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>

 </div>

 <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">

 <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>

 </div>

 </body>

 </html>

mouseout mouseleave区别

 <html>

 <head>

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

 <script type="text/javascript">

 x=0;

 y=0;

 $(document).ready(function(){

   $("div.over").mouseout(function(){

     $(".over span").text(x+=1);

   });

   $("div.enter").mouseleave(function(){

     $(".enter span").text(y+=1);

   });

 });

 </script>

 </head>

 <body>

 <p>不论鼠标指针移出被选元素或其子元素，都会触发 mouseout 事件。</p>

 <p>只有在鼠标指针移出被选元素时，才会触发 mouseleave 事件。</p>

 <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">

 <h2 style="background-color:white;">被触发的 mouseout事件：<span></span></h2>

 </div>

 <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">

 <h2 style="background-color:white;">被触发的 mouseleave事件：<span></span></h2>

 </div>

 </body>

 </html>

mouseover,mouseenter,mouseleave,mouseout的更多相关文章

  1. 最终解决 mouseenter, mouseleave , mouseout mousehover mousemove等事件的区别?

    在jquery中, html页面的div的显示和隐藏, 修改等的功能, 最终都要由 事件 触发来引用, 不管是键盘事件, 还是鼠标事件... mouseenter和mouseleave是成对对应的, ...

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

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

  3. mouseout、mouseover和mouseleave、mouseenter区别

    今天在使用鼠标事件时,用错了mouseout,于是做个测试总结. 结论: mouseenter:当鼠标移入某元素时触发. mouseleave:当鼠标移出某元素时触发. mouseover:当鼠标移入 ...

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

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

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

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

  6. mouseover与mouseenter，mouseout与mouseleave的区别

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

  7. mouseover&mouseout和mouseenter&mouseleave

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

  8. mouseover，mouseenter，mouseout，mouseleave的区别

    mouseover :不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseout :不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. mous ...

  9. jquery hover(overListener, outListener) || bind('mouseover',methodA).bind('mouseout',methodB)

    1.区别: bind方式,进入外部区域和内部区域都会触发相关方法(methodA 或methodB): hover方式,进入内部区域不会再触发相关方法. 2.example: <body> ...

随机推荐

  1. ubuntu下php xdebug的安装(配置)

    首先Xdebug要和php版本对应,具体查看官网    https://xdebug.org/ xdebug-2.1.0PHP Version 5.3.10linux下解压xdebug包.1.进入xd ...

  2. Task<TResult>的使用

    https://msdn.microsoft.com/en-us/library/dd321424(v=vs.110).aspx Represents an asynchronous operatio ...

  3. error: command 'gcc' failed with exit status 1 的解决办法

    yum install gcc python-devel 之前yum install gcc* 了 所以没成功. wget http://prdownloads.sourceforge.net/doc ...

  4. ABAP锁、数据库锁

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  5. HDU 1728 逃离迷宫

    [题目描述 - Problem Description] 给定一个m × n (m行, n列)的迷宫,迷宫中有两个位置,gloria想从迷宫的一个位置走到另外一个位置,当然迷宫中有些地方是空地,glo ...

  6. windows上配置git

    windows上配置git1.下载mysisigit进入http://msysgit.github.io/,下载,安装,下一步下一步即可. 2.下载tortoisegit进入http://downlo ...

  7. 查询计划Hash和查询Hash

    查询计划hash和查询hash 在SQL Server 2008中引入的围绕执行计划和缓冲的新功能被称为查询计划hash和查询hash.这是使用针对查询或查询计划的算法来生成二进制hash值的二进制对 ...

  8. ubuntu_杂

    1. 虚拟机安装的 ubuntu 12.04,在关闭了 一段时间不操作就屏保 和 锁屏 之后, 在一段时间之后 虚拟机的屏幕还是变黑了,貌似是 os将 显示器关闭了. 这个相关的设置是在哪里? 相关设 ...

  9. ubuntu12.04_命令

    1. 切换 终端方式 与 图形界面方式: 切换到 终端方式:ctrl+alt+F1~F6(貌似有时 alt+F1~F6也行?) 切换回 图形界面方式:ctrl+alt+F7 2. ubuntu12.0 ...

  10. 卷积FFT、NTT、FWT

    先简短几句话说说FFT.... 多项式可用系数和点值表示,n个点可确定一个次数小于n的多项式. 多项式乘积为 f(x)*g(x),显然若已知f(x), g(x)的点值,O(n)可求得多项式乘积的点值. ...