两个div显示与消失的问题

两个div高宽相同，一个叫a，一个叫b，当鼠标指向a是，b完全覆盖它，鼠标离开时，b离开a，求大师实现。。js div

解决方案 »

  1.   

    通过onmouseover事件改变Z-index属性进行覆盖 主要还是css怎么写
      

  2.   


    <style type="text/css">
    #div1{
    margin-top:50px;
    margin-left:250px;
    width:200px;
    padding:40px;
    background:#FFFFFF;
    border:solid 1px #c3c3c3
    }
    #div2{
    margin-top:50px;
    margin-left:250px;
    width:200px;
    padding:40px;
    background:#00FF00;
    border:solid 1px #c3c3c3
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/JavaScript">
    $(function(){
    $("#div1").mouseover(function(){$(this).hide();}).mouseout(function(){$(this).show();});
    })
    </script>
    <div id="div1">
    这个区域是DIV1
    </div>
    <div id="div2">
    这个区域是DIV2
    </div>
      

  3.   

    $("#div1").mouseover(function(){$(this).hide();}).mouseout(function(){$(this).show();});这理论上说不过去呀，鼠标在上面就隐藏，那不马上就执行mouseout?
        <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
            <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <style>
    .div{
    margin-top:50px;
    margin-left:250px;
    width:200px;
    padding:40px;
    background:#FFFFFF;
    border:solid 1px #c3c3c3
    }
    #div2{
      border:solid red;
      position:absolute;
      z-indent:2;
    }
    </style>
    <body>
    <script type="text/JavaScript">
        $(function(){
          var p1={left:$("#div1").position().left,top:$("#div1").position().top};
          var p2={left:$("#div2").position().left,top:$("#div2").position().top};
            $("#div1").mouseenter(function(){
              $("#div2").stop().animate(p1,"solw");
            });
            $("#div2").mouseout(function(){
              $("#div2").stop().animate(p2,"solw");
            })
        })
    </script>
    <div id="div1" class="div">
    这个区域是DIV1
    </div>
    <div id="div2" class="div">
    这个区域是DIV2
    </div>
    </body>
    </html>