我现在在做一个导航 鼠标移到父导航子出现 但是移到子导航的时候 父导航就消失了 我就想捕捉鼠标的是不是在子导航上 如果是就取消 隐藏父导航 请问怎么实现 

解决方案 »

  1.   

    求高手指点 鼠标移动能不能拿到event?
      

  2.   

    建议用JQUERY,很简单的<!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=gb2312" />
    <title>无标题文档</title>
    <script src="jquery/jquery.js" type="text/javascript"></script>
    <style>
    #main_nav{ margin:0;
                padding:0;}
    #main_nav li{ width:70px;
                height:30px;
                list-style:none;
                background:#999999;
                margin-top:10px;
                }
    #main_nav li span{border:1px solid #000000;
                        }
    .child{ width:500px;
            height:300px;
            position:absolute;
            display:none;
            background:#0099FF;}</style>
    <script>
    $(document).ready(function(){
            var pos;
            var id;
            var x=70;
            var child;
            $("#main_nav>*:even").css("background","#00CCFF");
            $("#main_nav>*").hover(function(){
                pos=$(this).position();
                id=$(this).attr("id");
                child=$("#child_"+id);
                child.css({"top":pos.top+"px","left":(pos.left+x)+"px","display":"block","border":"1px solid #FEF8EF"});
            },function(e){
                child.hide();
            var moveIn=false;
                child.hover(function(){
                    moveIn=true;
                    $(this).show();
                },function(){
                    moveIn=false;
                    $(this).hide();
                });
                
            });
    });</script>
    </head><body>
    <ul id="main_nav">#FEF8EF
    <li id="1"><span><a>第一个</a></span></li>
    <li id="2">第二个</li>
    <li id="3">第三个</li>
    <li id="4">第四个</li>
    <li id="5">第五个</li>
    <li id="6">第六个</li>
    <li id="7">第七个</li>
    </ul>
    <div id="child_1" class="child"></div>
    <div id="child_2" class="child"></div>
    <div id="child_3" class="child"></div>
    <div id="child_4" class="child"></div>
    <div id="child_5" class="child"></div>
    <div id="child_6" class="child"></div>
    <div id="child_7" class="child"></div>
    </body>
    </html>