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. HDU 4648 Magic Pen 6

    题目链接 6Y什么水平.. #include <cstdio> #include <cstring> #include <string> #include < ...

  2. Linux_自动调整linux系统时间和时区与Internet时间同步

    调整linux系统时间和时区与Internet时间同步 一.修改时区:# cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime修改为中国的东八区# v ...

  3. php页面之间传值

    echo("<script>window.open('2.php?head=".$head."');<script>");

  4. SDR和DDR1/2/3全系列频率对照表

  5. Javascript 笔记与总结（2-12）联动菜单

    联动菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. 字符串复制char *strcpy(char* dest, const char *src);

    ⒈strcpy的实现代码 char * strcpy(char * strDest,const char * strSrc) { if ((NULL==strDest) || (NULL==strSr ...

  7. SET GLOBAL slow_query_log=1

    - Variable 'slow_query_log' is a GLOBAL variable and should be set with SET GLOBAL SHOW VARIABLES LI ...

  8. SQL查询语句中的 limit offset（转 ）

    经常用到在数据库中查询中间几条数据的需求 比如下面的sql语句: ① selete * from testtable limit 2,1; ② selete * from testtable limi ...

  9. 【转】get a mysterious problem,when i use HttpWebRequest in unity c# script

    in script,i use HttpWebRequest to get service from network.but it comes a mysterious problem. the so ...

  10. 【No.2】监控Linux性能25个命令行工具

    接着上一篇博文继续 [No.1]监控Linux性能25个命令行工具 10:mpstat -- 显示每个CPU的占用情况 该命令可以显示每个CPU的占用情况,如果有一个CPU占用率特别高,那么有可能是一 ...