JS关于mouseout事件在父亲元素与子元素之间的小问题,求解了 ,谢谢

我又来了,想把问题搞明白不想不求甚解

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<style>
    *{margin:0; padding:0; list-style-type:none;}
    nav{height:40px; width:1000px; margin:auto; background:#ccc; position:relative; top:0; left:0;}
    #A li{width:40px; height:40px; float:left; padding-left:20px;}
    #B li{width:60px; height:40px; position:absolute; top:40px; left:0; background:green; display:none;}
</style>
</head>
<body>
<nav onmouseout="xi()">
   <ul id="A">
       <li onmouseover="show(0)">首页1</li>
       <li onmouseover="show(1)">男装2</li>
       <li onmouseover="show(2)">女装3</li>
       <li onmouseover="show(3)">热卖4</li>
   </ul>
    <ul id="B" onmouseout="show2()" onmouseover="show3()">
        <li>商品1</li>
        <li>商品2</li>
        <li>商品3</li>
        <li>商品4</li>
    </ul>
</nav>
</body>
<script>
    var a=document.getElementById('A').getElementsByTagName('li');
    var b=document.getElementById('B').getElementsByTagName('li');
    function show(m){
        b[m].style.display='block';
        b[m].style.left=a[m].offsetLeft+'px';
    }
    function xi(){
        for(var i=0;i< b.length;i++){
            b[i].style.display='none';
        }
    }
        window.setTimeout('xi()',1000);
    function show2(){
        for(var i=0;i< b.length;i++){
            b[i].style.display='none';
        }
    }
</script>
</html>

我认为鼠标离开B, B才会消失, 因为B是nav里的元素啊
但是事实是鼠标一离开nav B就消失了
, 我看别人那么写的都可以啊 我的为什么不行了.... - -!好忧桑
(我也知道nav的height是40px),

昨晚一位好心的网友给了我这个答案让我参考:
onmouseout事件过于敏感,所以通过setTimeout事件来延迟事件的执行就好了.

 someElement.onmouseout = function () {
        // ch在函数顶端已经var过了
        ch = setTimeout("something", 100);

    };

(if (ch) {
clearTimeout(ch);
}
至于这个判断要放在什么地方,具体情况具体分析,不过大部分都是放在onmouseover事件的顶部
)
我觉得思路很棒啊,但是不知道怎么用进去
someElement是什么意思啊?

谢谢大家了

解决不了问题很苦恼啊 = =!


 


    
    *{margin:0; padding:0; list-style-type:none;}
    nav{height:40px; width:1000px; margin:auto; background:#ccc; position:relative; top:0; left:0;}
    #A li{width:40px; height:40px; float:left; padding-left:20px;}
    #B li{width:60px; height:40px; position:absolute; top:40px; left:0; background:green; display:none;}
 
    

  • 首页1
    • 
       
  • 男装2
    • 
       
  • 女装3
    • 
       
  • 热卖4
    • 
    


    

  • 商品1
    • 
        
  • 商品2
    • 
        
  • 商品3
    • 
        
  • 商品4
    • 
    
 
    var aALi=document.getElementById('A').getElementsByTagName('li');
    var aBLi=document.getElementById('B').getElementsByTagName('li');
    var timer = null;

    function fnShowNav(m){
        fnHideShop();
        aBLi[m].style.display='block';
        aBLi[m].style.left=aALi[m].offsetLeft+'px';
    }

    function fnHideShop(){
        for(var i=0;i< aBLi.length;i++){
            aBLi[i].style.display='none';
        }
    }
    function fnOut(){
        timer = setTimeout(fnHideShop,300);
    }
    function fnOver(){
        clearTimeout(timer);
    }

http://www.cnblogs.com/zhrj000/archive/2012/10/11/2720353.html

要么是事件区域选择问题出错了，要么就是mouseover和mouseout区别的问题

<!DOCTYPE html>



*{margin:0; padding:0; list-style-type:none;} nav{height:40px; width:1000px; margin:auto; background:#ccc; position:relative; top:0; left:0;} #A li{width:40px; height:40px; float:left; padding-left:20px;} #B li{width:60px; height:40px; position:absolute; top:40px; left:0; background:green; display:none;}





  • 首页1

  • 男装2

  • 女装3

  • 热卖4



  • 商品1

  • 商品2

  • 商品3

  • 商品4



var aALi=document.getElementById('A').getElementsByTagName('li'); var aBLi=document.getElementById('B').getElementsByTagName('li'); var timer = null; function fnShowNav(m){ fnHideShop(); aBLi[m].style.display='block'; aBLi[m].style.left=aALi[m].offsetLeft+'px'; } function fnHideShop(){ for(var i=0;i< aBLi.length;i++){ aBLi[i].style.display='none'; } } function fnOut(){ timer = setTimeout(fnHideShop,300); } function fnOver(){ clearTimeout(timer); }

下次写代码规范点，另外 不建议行间加事件

图片说明

看图片吧