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. Linux 性能监测：介绍

    看了某某教程.读了某某手册,按照要求改改某某设置.系统设定.内核参数就认为做到系统优化的想法很傻很天真:)系统优化是一项复杂.繁琐.长期的 工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采 ...

  2. [51NOD1024] 矩阵中不重复的元素（数学，精度）

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1024 因为n和m都到100了,所以直接快速幂硬算一定会爆炸,考 ...

  3. Spring与其他Web框架集成

    Spring与多种流行Web应用框架(Struts.JSF和DWR)集成的方法. Spring强大的IoC容器和企业支持特性使其十分适于实现Java EE应用的服务和持续层. 对于表现层,可以在许多不 ...

  4. windows c dll的创建与调用

    DLL代码: // TestDynamic.cpp: implementation of the TestDynamic class. // ///////////////////////////// ...

  5. 常见Android测试工具简介

    在进行android设备测试过程中,在进行系统测试时候,往往需要关注到很多方面,导致一个崩溃或者运行一段时间自动重启或者停止的问题很多.最简单来看,影响因素就有:底层硬件设备.OS层.上层app层.另 ...

  6. html textarea 获取换行

    1.需求: 获取textarea中的换行符,存到数据库中,并在取出时显示出换行操作 2.实践 2.1 发现可以取到换行符 "/n" ,并且可以存储到MySQL数据库中,并不需要特殊 ...

  7. [转载] 彻底学习STL中的Allocator

    原文: http://cissco.iteye.com/blog/379093 帮助我们理解allocator的原理 Allocator是C++语言标准库中最神秘的部分之一.它们很少被显式使用,标准也 ...

  8. 02 key concept

    本章提要-------------------------------------术语, 选择性与基数, 软解析与硬解析, 绑定变量, 扩展的游标共享SQL语句生命周期, 特别关注解析部分------ ...

  9. Java中HashMap案例

    package ch8; import java.util.*; /** * Created by Jiqing on 2016/11/27. */ public class MapTest { pu ...

  10. 如何让JS的变量名变量化

    unction message() { var k=0; // var olk+k="sdasdasd"; eval("var olk"+k+"='a ...