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. JavaScript验证正则表达式大全

    JavaScript验证正则表达式大全,搜集最全的JavaScript验证正则表达式,开始查看吧,这里的都是正则表达式的例子,具体和函数结合的使用方法,还请查看下篇文章<JavaScript使用 ...

  2. iOS移动开发周报-第21期

    iOS移动开发周报-第21期 [摘要]:本期iOS移动开发周报带来如下内容:苹果iCloud中国数据转存中国电信,Swift Operators,100 个 Swift 必备 tips,FLEXLoa ...

  3. 结合自己的程序对thinkphp模板常量的理解

    先上个图,有时候路径很多,没理解会搞混,看手册的说明 页面login.html模板的访问路径为http://www.tp.com/index.php/admin/Manager/login,测试他的常 ...

  4. codeacademy

    codeacademy http://link.zhihu.com/?target=https%3A//www.youtube.com/playlist%3Flist%3DPLP6DbQBkn9ymG ...

  5. lucene 3.0.2 search 各种各样的Query类型

    http://blog.sina.com.cn/s/blog_61d2047c010195mo.html     lucene的这种各种各样的查询类型 1.TermQuery       最简单的Qu ...

  6. HDU 3374 String Problem（KMP+最大/最小表示）

    String Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  7. PHP下利用PHPMailer配合QQ邮箱下的域名邮箱发送邮件（转）

    首先确定不是开启socks openssl phpinfo就可以知道 下载phpmailer   地址:https://github.com/PHPMailer/PHPMailer 下载完整, 个人和 ...

  8. Yii源码阅读笔记（十二）

    Action类,控制器中方法的基类: namespace yii\base; use Yii; /** * Action is the base class for all controller ac ...

  9. Unity中的协程(一)

    这篇文章很不错的问题,推荐阅读英文原版: Introduction to Coroutines Scripting with Coroutines   这篇文章转自:http://blog.csdn. ...

  10. memcached学习笔记4--memcache扩展操作memcached

    1. 安装并配置memcache扩展库 找到php.ini文件 添加: extendsion= php_memcache.dll 并把对应的dll文件拷贝到ext目录 2. 使用PHP对Memcahc ...