在javascript中显示和隐藏鼠标上的div

我有3个id为1,2,3的div，我只想当鼠标移到id为1的div上时显示id为2的div，当鼠标移到div 2上时显示div 1。随着div 3的出现，当我们再次将鼠标从div 3中移出时，单击一个id为btn n的div 2按钮，就会出现div 1，然后我们再次将鼠标移到div 1 div 3上。n它们必须出现在同一个地方…使用javascript plz…这里是简单的html代码

<div id="1" style="position:absolute; height:200px; width:200px;">
<table width="100%" border="01">
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
</table>

</div>

<div id="2" style="position:absolute; height:200px; width:200px;">
  <table width="100%" border="01">
    <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td><input type="button" id="btn"></td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
  </table>

</div>

<div id="3" style="position:absolute; height:200px; width:200px;">
  <table width="100%" border="01">
    <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>&nbsp;</td>

    </tr>
  </table>

</div>

试试看

 $( "#div2" ).mouseover(function() {
      $("#div1").hide();
    $("#div2").show();
    });

更多信息：

---

编辑：其他信息

您需要首先包括jquery。 然后试试看

我希望，这能奏效；） 你也可以尝试使用

 $('#div1').style.visibility='hidden';

而不是

 $('#div1').style.display='none';

---

纯Javascript中的一些内容：

    <script>
        var div_one = document.getElementById("1")
        var div_two = document.getElementById('2');
        var div_three = document.getElementById('3');
        var button = document.getElementById('btn');

        var common_div = 2;

        div_one.onmouseover=function(){
            if(common_div==3)
                div_three.style.display = 'block';
            else
                div_two.style.display = 'block';
            div_one.style.display = 'none';
        };

        div_two.onmouseout=function(){
            div_one.style.display = 'block';
            div_two.style.display = 'none';
        };

        div_three.onmouseout=function(){
            common_div = 3;
            div_one.style.display = 'block';
            div_two.style.display = 'none';
            div_three.style.display = 'none';
        };

        button.onclick = function(){
            div_three.style.display = 'block';
        }
    </script>

var div_one=document.getElementById（“1”）
var div_two=document.getElementById（'2'）；
var div_three=document.getElementById（'3'）；
var button=document.getElementById（'btn'）；
var公共分区=2；
div_one.onmouseover=函数（）{
如果（公共分区==3）
div_three.style.display='block'；
其他的
div_two.style.display='block'；
div_one.style.display='none'；
};
div_two.onmouseout=函数（）{
div_one.style.display='block'；
div_two.style.display='none'；
};
div_three.onmouseout=函数（）{
公共分区=3；
div_one.style.display='block'；
div_two.style.display='none'；
div_three.style.display='none'；
};
button.onclick=函数（）{
div_three.style.display='block'；
}

你能展示你的代码吗？到目前为止你试过什么吗？或者只是寻找一个解决方案而不做任何努力？我试图实现这样的目标…jst看看任何玻璃…n如果我必须使用div的动态ID怎么办？它不适用于相互重叠的div…我试图实现这样的目标。。只要检查一下lenskart中的任何玻璃，如果你可能注意到一件物品的所有3个部分都在一个容器内。无需指定位置。

    <script>
        var div_one = document.getElementById("1")
        var div_two = document.getElementById('2');
        var div_three = document.getElementById('3');
        var button = document.getElementById('btn');

        var common_div = 2;

        div_one.onmouseover=function(){
            if(common_div==3)
                div_three.style.display = 'block';
            else
                div_two.style.display = 'block';
            div_one.style.display = 'none';
        };

        div_two.onmouseout=function(){
            div_one.style.display = 'block';
            div_two.style.display = 'none';
        };

        div_three.onmouseout=function(){
            common_div = 3;
            div_one.style.display = 'block';
            div_two.style.display = 'none';
            div_three.style.display = 'none';
        };

        button.onclick = function(){
            div_three.style.display = 'block';
        }
    </script>