经典的Jquery的Hover事件，注意与JS的mouseover跟mouseout函数的区别

1.?hover( over, out )?

hover函数主要解决在原始javascript中mouseover和mouseout函数存在的问题, 看下面这个示例:

有两个div(红色区域), 里面分别嵌套了一个div(黄色区域). HTML代码如下:

    <div class="outer" id="outer1">
      Outer 1
      <div class="inner" id="inner1">Inner 1</div>
    </div>
    <div class="outer" id="outer2">
      Outer 2
      <div class="inner" id="inner2">Inner 2</div>
    </div>
    <div id="console"></div>

?

绑定如下事件:

    <script type="text/javascript">
      function report(event) {
        $('#console').append('<div>'+event.type+'</div>');
      }

      $(function(){
        $('#outer1')
         .bind('mouseover',report)
         .bind('mouseout',report);
        $('#outer2').hover(report,report);
      });
    </script>

Outer1我们使用了mouseover和mouseout事件,? 当鼠标从Outer1的红色区域移动到黄色区域时, 会发现虽然都是在outer1的内部移动, 但是却触发了mouseout事件:

很多时候我们不希望出现上图的结果,? 而是希望只有鼠标在Outer1内部移动时不触发事件, Outer2使用Hover()函数实现了这个效果:

注意这里的事件名称进入叫做"mouseenter", 离开叫做"mouseleave", 而不再使用"mouseover"和"mouseleave"事件.

有经验的开发人员会立刻想到在制作弹出菜单时, 经常遇到这个问题: 为弹出菜单设置了mouseout事件自动关闭, 但是鼠标在弹出菜单内移动时常常莫名其妙触发mouseout事件让菜单关闭. hover()函数帮助我们很好的解决了这个问题.