开发者社区> 问答> 正文

onmouseout 事件

#subNav{
            width:500px;
            height:500px;
            margin-top:30px;
            margin-left:300px;
            background-color:#999;
             
        }
         
        .floors{
           width:260px;
           margin-left:140px;
        }
         
        .floors li{
            width:100px;
            height:28px;
            border:#00F thin dashed;
            float:left;
            margin-right:20px;
         }
         
        li{
            list-style:none;
        }
         
        a{
            text-decoration:none;
            color:#CCC; 
        }
        #floor_nav{
            width:100%;
            height:28px;
            background-color:#999;
            text-align:center;
        }
         
        #floor_nav  ul li a{
             width:100px;
             height:28px;
                 
        }
         
        #sub_floor_menus{
            width:100%;
            height:100%;
            background-color:#00C;
            margin-top:-1px;
             
        }
        .hover{
            background-color:#F00;
        }
         
        .unhover{
            background-color:#00C;
        }
         
        .menu{
            height:100%;
            padding-left:100px;
        }
         
        .menu  ul li{
            width:200px;
            text-align:center;      
        }
         
        #test{
            width:200px;
            height:200px;
            background-color:#093;
        }

$(function(){
             $("#floor_nav ul li").each(function(i){
                  $(this).removeClass('hover').addClass('unhover');              
                  
                  $(this).mouseover(function(e){
                           $(this).removeClass('unhover').addClass('hover');
                           $(".menu").hide();
                           $("#sub_"+$(this).attr('id')).css('background-color','#F00').show();     
                  });
               });
            
           $("#subNav").mouseout(function(e){
                           //alert('我已经离开目标区域');
                           //console.info(e.clientX);
                           $(".floors li").removeClass('hover').addClass('unhover');
                           $(".menu").hide();               
 
           });
 
);
 
<div id="floor_nav">
   <ul class="floors">
     <li id="floor_1"  class="hover"><a href="#">男装</a></li>
     <li id="floor_2"  class="unhover"><a href="#">女装</a></li>
   </ul>
   <span class="blank0"></span>
  </div>
  <div id="sub_floor_menus" class="sub-floor-menus"> 
     <div id="sub_floor_1" class="menu" style="left: 1px; top: 30px; display: none;">
         <ul>
            <li>男装</li>
            <li>男装</li>
            <li>男装</li>
         </ul>
     </div>
     <div id="sub_floor_2" class="menu" style="left: 1px; top: 30px; display: none;">
            <ul>
            <li>女装</li>
            <li>女装</li>
            <li>女装</li>
         </ul>
     </div>
   </div>
</div>

展开
收起
a123456678 2016-07-05 11:12:39 1691 0
1 条回答
写回答
取消 提交回答
  • mouseover/mouseout 事件会冒泡,所以你在被绑定元素的子元素范围内进出时该事件消息会冒泡到父元素上于是触发你绑定在父元素上的(事件)函数。而mouseenter/mouseleave只在你绑定的元素上触发事件,进出子元素其实也会触发mouseover/mouseout事件,但会被jquery阻止传播(冒泡)。

    2019-07-17 19:51:19
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载