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. Spring 框架 详解 （二）

    Spring的入门的程序: 1.1.1 下载Spring的开发包: spring-framework-3.2.0.RELEASE-dist.zip ---Spring开发包 * docs :sprin ...

  2. CronTrigger：Corn表达式

    定时触发 CronTrigger CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,复发的发射工作的时间表.C ...

  3. CG基础教程-陈惟老师十二讲笔记

    转自 麽洋TinyOcean:http://www.douban.com/people/Tinyocean/notes?start=50&type=note 因为看了陈惟十二讲视频没有课件,边 ...

  4. CUBRID学习笔记23 关键字列表

    先放上特殊的字符 Backtick Symbol - `    反引号 同撇 Double Quotes - "      双引号 Square Brackets - [  中括号 如    ...

  5. 从xubuntu-->windows xp

    捣鼓了两个月的ubuntu之后我又乖乖的回到了windows的怀抱,不是抛弃linux而是要适应身边的环境. 身边的板子的驱动基本上都是xp的老一点的还是vista的,让人情何以堪. 我努力克服了,用 ...

  6. Maven聚合与继承

    分别为两种不同形式的聚合 相关代码如下: https://github.com/humeng126/account-parent_1 https://github.com/humeng126/acco ...

  7. iOS - TouchID 指纹识别

    前言 NS_CLASS_AVAILABLE(10_10, 8_0) @interface LAContext : NSObject 指纹识别功能是 iPhone 5s 推出的,SDK 是 iOS 8. ...

  8. Nginx模块学习之————accesskey权限模块使用(Nginx防盗链详细解说),防止别人下载文件和图片

    nginx 的第三方模块ngx_http_accesskey_module 来实现下载文件的防盗链 1.具体安装教程:http://www.cnblogs.com/tinywan/p/5983694. ...

  9. Redis脚本插件之————执行Lua脚本示例

    Redis在2.6推出了脚本功能,允许开发者使用Lua语言编写脚本传到Redis中执行.使用脚本的好处如下: 1.减少网络开销:本来5次网络请求的操作,可以用一个请求完成,原先5次请求的逻辑放在red ...

  10. JavaWeb学习总结（十五）--过滤器的应用

    一.解决全站字符乱码(post和get中文编码问题) 乱码问题: 获取请求参数中的乱码问题: POST请求:request.setCharacterEncoding("utf-8" ...