jquery的hover mouseover mouseout mouseenter mouseleave的区别

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 ); 
     }
  })

 

posted @ 2016-04-11 15:22  咕-咚  阅读(248)  评论(0)  编辑  收藏  举报