用jQuery做两个DIV的隐藏和显示效果的问题

有两个成一个DIV1 一个DIV2  当我单击DIV1时 显示DIV2，  当鼠标从DIV1离开时DIV2隐藏，当鼠标移到DIV2时DIV2就不能隐藏
这个效果怎么做？

解决方案 »

  1.   

    那如果鼠标离开了div2怎么办呢
      

  2.   

    随便写的。你看行不~
    <html> 
    <head>
    <title></title>
    <style>
    #div1 {
    width:200px;
    height:200px;
    background-color:black;
    }
    #div2 {
    width:200px;
    height:200px;
    background-color:red;
    display:none;
    }
    </style>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>   
      <script language="JavaScript">
    $(function() {
    var tag = 1;
    $("#div1").click(function() {
    $("#div2").show();
    });
    $("#div1").mouseout(function() {
    tag = 0;
    });
    $("#div1").mouseover(function() {
    tag = 1;
    });
    $("#div2").mouseover(function() {
    tag = 1;
    });
    $("#div2").mouseout(function() {
    tag = 0;
    });
    $("body").mouseover(function() {
    if(!tag) {
    $("#div2").hide();
    }
    });
    });
      </script>
      </head>
    <body>
    <div id='div1'></div>
    <div id='div2'></div>
     </body>
    </html>
      

  3.   

    我晕死了，导航菜单是有个包的
    <li><a></a><div></div></li>
    看好了，虽然离开了a，但是还在li中，所以依然是显示啊
      

  4.   

    看看这个
    http://www.doyoe.com/model/xhtmlcss/menu/menu1/1.htm
      

  5.   

    貌似还可以有<ul> 怎么控制他们呢 就是要我刚刚那种效果，用什么事件？
      

  6.   

    你可以直接使用我给你这个网址的
    纯css的，我感觉不错
      

  7.   

    上面这个<script type="text/javascript" src="jquery-1.4.2.min.js"></script>是怎么来的？自己写的吗？