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. UVA10339 Watching Watches

    题目大意:有两个表,每天都会慢一点时间,给出每天慢得秒数,问下一次重合的时刻. 解题思路:时刻重合也就是说整整差了一周,一周是12小时,用12小时的秒数除以两个表的相差那就是需要多少天的时间后重合,知 ...

  2. Mysql压测工具mysqlslap 讲解

    在mysql5.1以后的版本:客户端带了个工具mysqlslap可以对mysql进行压力测试: 可以使用mysqlslap --help来显示使用方法: Default options are rea ...

  3. Application 应用程序对象使用介绍

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoApplicatio ...

  4. 列联表（Crosstabs）

    四格表(2*2的列联表): Tmin为最小的频数:N为频数之和. 1 当 Tmin≥5,N≥40时, 用普通卡方检验公式;2 当1≦Tmin≦5, N≥40时, 用校正卡方检验公式;3 Tmin< ...

  5. Linux运行变量中的命名脚本

    single="ls -l" $single ============= multi="ls -l | grep e" echo $multi > tmp ...

  6. GBrowse配置相关资料

    GBrowse配置相关资料(形状.颜色.配置.gff3) http://gmod.org/wiki/Glyphs_and_Glyph_Optionshttp://gmod.org/wiki/GBrow ...

  7. ABAP DESCRIBE语句

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

  8. 九度-剑指Offer

    二维数组中的查找 分析:既然已经给定了每一行从左至右递增,那么对于每一行直接二分查找即可,一开始还想着每一列同样查找一次,后来发现每一行查找一遍就能够遍历所有的元素了. #include <cs ...

  9. Nginx基础知识之——配置文件信息（检查配置文件是否正确）

    一.检查配置文件是否正确: /usr/local/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf 检查结果: nginx: [emerg] ngin ...

  10. effect c++ 口诀。

    常用条款,写成口诀,记住.知其所以,也要时时使用. 1)习惯c++: 联替const初. 2)构造,复制,析构: 要知默,构赋析. 若不需,明拒绝. 构析不调虚. 异不逃析构. 基析要虚函. 赋值操, ...