Question

我有3个id为1,2,3的div，我想要的是在id为1的div上显示id为2的div，当div 2上的鼠标输出事件时显示div 1，以及该div如果我们鼠标离开div 3再次显示div 1并且我们再次鼠标悬停div 1 div 3，则在id为btn n的div 2上单击按钮时出现3。他们必须出现在同一个地方...使用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>

Answer 1

尝试

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

更多信息：LINK

编辑：其他信息LINK2

Answer 2

您需要先包含jquery。然后尝试

 $('#div1').mouseover(function() {
    $('#div1').style.display='none';
    $('#div2').style.display='block';
 });
 $('#div2').mouseout(function() {
    $('#div1').style.display='block';
 });
 $('#btn').onclick(function() {
    $('#div3').style.display='block';
 });

我希望，这有效;）您也可以尝试使用

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

而不是

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

Answer 3

Pure 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>

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

3 个答案: