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. Python3基础 for循环 遍历并输出一个字符串的列表

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  2. CSS3弹力球

    如下代码实现方块在限定区域内不停弹跳. <!DOCTYPE html> <html> <head> <style> div { width:100px; ...

  3. JUnit 单元测试 配置

    选中工程,右键  built path , add liberaries , JUnit , JUnit4 这样就不用每次测试时都在main方法中写了

  4. [SAP ABAP开发技术总结]几个小问题

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

  5. So easy Webservice 4.Java方式访问WebService（使用jdk1.6以上 wsimport命令）

    1.选中要调用的服务单击”服务说明” 2.获取wsdl文件.使用JDK1.6以上的版本的wsimport命令 a) 例如选中:http://webservice.webxml.com.cn/WebSe ...

  6. python_way day15 HTML-DAY2 HTML-DAY2、JS

    python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 1.input与+,-号的写法 <!DOCTYPE html> ...

  7. iOS - UIControl

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIControl : UIView @available(iOS 2.0, *) public class UIC ...

  8. JavaWeb项目的classpath说明

    概念解释: classpath : 即项目中WEB-INF下面的classes目录; 应用: [01] src路径下的文件在编译后会放到WEB-INF/classes路径下.默认的classpath是 ...

  9. C#操作Excel数据增删改查(转)

    C#操作Excel数据增删改查. 首先创建ExcelDB.xlsx文件,并添加两张工作表. 工作表1: UserInfo表,字段:UserId.UserName.Age.Address.CreateT ...

  10. poj1556The Doors

    链接 枚举两点 若不和任何线段相交 建边为dis(i,j) floyd求最短路 #include <iostream> #include<cstdio> #include< ...