jquery的hover mouseover mouseout mouseenter mouseleave的区别

1.mouseover mouseout

mouseover - 鼠标指针经过任何子元素都会触发绑定在父元素上的mouseover事件

mouseout - 鼠标指针离开任何子元素时都会触发父元素上的mouseover事件

然后，你把代码拷贝过去try一下，就会有更深刻的理解；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

  $(function (){

       var outer=$("#outer");

       outer.mouseover(function (){

           alert('outer mouseover');

       }).mouseout(function (){

            alert('outer mouseout');

       })

       //当子元素的over 和 out事件发生时，

       //事件会冒泡到父级，也就是说outer上的 over 和 out 会被触发

       var inner=$("#inner");

       inner.mouseover(function (){

             alert('inner mouseover');

       }).mouseout(function (){

              alert('inner mouseout');

       })

  })

</script>

<style type="text/css">

.outer{

    height:100px;

    width:20%;

    background-color:green;

    float:left;

    margin-left:25px;

}

.inner{

    height:50px;

    width:60%;

    margin:25px auto;

    background-color:red;

}

</style>

</head>

<body>

  <div id="outer" class="outer">

   <div id="inner" class="inner"></div>

  </div>

</body>

</html>

2.mouseenter mouseleave

mouseenter - 鼠标指针经过绑定的元素时触发事件，经过其子元素时，不会触发事件

mouseleave - 只有当鼠标离开绑定的元素时才会触发该事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

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

<script type="text/javascript">

    $(function (){

       var outer1=$("#outer1");

       outer1.mouseenter(function (){

           alert('outer1 mouseenter');

       }).mouseleave(function (){

            alert('outer1 mouseleave');

       })

       var inner1=$("#inner1");

       inner1.mouseenter(function (){

             alert('inner1 mouseenter');

       }).mouseleave(function (){

              alert('inner1 mouseleave');

       })

  })

</script>

<style type="text/css">

.outer{

    height:100px;

    width:20%;

    background-color:green;

    float:left;

    margin-left:25px;

}

.inner{

    height:50px;

    width:60%;

    margin:25px auto;

    background-color:red;

}

</style>

</head>

<body>

 <div id="outer1" class="outer">

    <div id="inner1" class="inner"></div>

  </div>

</body>

</html>

houver：

hover！= mouseover+mouseout

hover=mouseenter + mouseleave

  $(function (){

     //我们的hover是这样定义的;

    hover: function( fnOver, fnOut ) {

    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );

     }

  })

jquery的hover mouseover mouseout mouseenter mouseleave的区别的更多相关文章

  1. mouseover,mouseout,mouseenter,mouseleave的区别

    1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...

  2. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  3. 你可能不知道的mouseover/mouseout mouseenter/mouseleave

    mouseover与mouseenter 1. 触发时机 mouseover在被监听的节点与子节点上都会触发 mouseenter只在被监听的节点上触发 本质上是因为mouseenter不能冒泡 2. ...

  4. jQuery里的mouseover与mouseenter事件类型区别

    JQ里面有mouseover和mouseenter  2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...

  5. 理解mouseover,mouseout,mouseenter,mouseleave

    mouseover定义和用法 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用. mouseover() 方法触发 mouseover ...

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

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

  7. jQuery mouseover与mouseenter,mouseout与mouseleave的区别

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

  8. 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

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

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

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

随机推荐

  1. 对于String对象，可以使用"="赋值，也可以使用"new"关键字赋值，两种方式有什么区别？

    当你看见这个标题的时候,你可能会下意识的去想一下,这两种方式到底有什么样的区别呢? 且看下面的demo,自然便区分开了 /** * */ package com.b510.test; /** * Pr ...

  2. Solve Error Debug Assertion Failed Expression vector iterators incompatible Using PCL in Release Mode of VS2010

    When using PCL 1.4.0 in the release mode building under VS2010, we might sometime get the error &quo ...

  3. 如何在URL筛选管理器中过滤不需要的URL

    互联网可以说是一把名副其实的双刃剑.一方面其可以提高工作效率.给企业提供充分的资源;另一方面如果管理不严,也会带来很多的隐患.如员工在上班时间玩游戏.炒股等等.为此现在很多企业希望对员工的网络行为进行 ...

  4. ajax利用json进行服务器与客户端的通信

    1.JQuery中$.ajax()方法参数详解 http://blog.sina.com.cn/s/blog_4f925fc30100la36.html 2.服务器端获取String que=requ ...

  5. DNS服务器的配置与应用: BIND9 的安装与配置

    3. BIND9 的安装与配置 3.1 bind简介 BIND (Berkeley Internet Name Domain)是Domain Name System (DNS) 协议的一个实现,提供了 ...

  6. MySQL5.7安装过程以及参数和设置说明

    最近在讲MySQL课程,为了省事就在用MySQL5.5版本.因为win10不论32还是64都可以运行MySQL32位.可有很多使用者了解MySQL官网之后,去下载最新版的MySQL来使用,这点我不反对 ...

  7. GDUT——1169: Krito的讨伐（优先队列BFS）

    1169: Krito的讨伐 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 619  Solved: 102 Description Krito终于干 ...

  8. CSS3动画（动画已丢，看原文）

    原文:http://ued.1905.com:8880/sample/css3/base/test.html CSS3动画 简要展示了CSS3常用动画效果,以及所使用代码. bounce 复制 展开代 ...

  9. CSS系列：长度单位&字体大小的关系em rem px

    em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=1 ...

  10. CSS权威指南 - 层叠

    CSS权威指南 第三章结构与层叠 - 层叠 按权重及来源排序 1. Reader important declarations 2. Author important declarations 3. ...