js实现一个效果


<body>
<div id="a" onmouseover="viewb()" style=" width:100px ; height:50px;background-color:#0000CC">aaaa
</div>
<div id="b" style="display:none"onmouseout="closeb()" style="background-color:#CC0000; width:100px ; height:50px;">bbbbb
</div>
<script>
function viewb(){
document.getElementById("b").style.display = "";
}
function closeb(){
document.getElementById("b").style.display = "none";
}
</script>
</body>

解决方案 »

  1.   

    楼上的没有实现 离开a但是没移到b上的 隐藏b
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
      <head>
        <title></title>
      </head>
    <body>
    <div id="a" onmouseover="viewb()" onmouseout="closeb()" style=" width:100px ; height:50px;background-color:#0000CC">aaaa
    </div>
    <div id="b" style="display:none"onmouseout="closeb()" onmouseover="viewb()" style="background-color:#CC0000; width:100px ; height:50px;">bbbbb
    </div>
    <script>
        function viewb(){
            document.getElementById("b").style.display = "";
        }
        function closeb(){
            document.getElementById("b").style.display = "none";
        }
    </script>
    </body>
    </html>
    这样就ok了
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type='text/css'>
    .one{margin:10px; width:200px; height:160px; background-color:#ccc; font-size:30px; line-height:160px; text-align:center;color:#fff;}
    </style>
      <script type="text/javascript">
       var t;
       function hidden(){
    t=setTimeout(function(){document.getElementById("B").style.display="none";},1000);
       }
       function show(){
    clearTimeout(t);
       }
      </script>
    </head>
    <body >
    <div class='one' onmouseover='document.getElementById("B").style.display="";' onmouseout='hidden()'>A</div>
    <div class='one' id='B' style='display:none;' onmouseover='show()' onmouseout='hidden()'>B</div>
    </body>
    </html>