-1

我有 3 个 id 为 1,2,3 的 div，我想要的只是当鼠标悬停在 id 为 1 的 div 上时显示 id 为 2 的 div，并在 div 2 上的鼠标移出事件时显示 div 1。以及 div 3 出现时如果我们再次将鼠标移出 div 3，然后我们再次将鼠标悬停在 div 1 上，则会在 div 2 上单击一个按钮，其 id btn n 会出现 div 3。n 它们必须出现在同一个地方...请使用 javascript...这里是简单的 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>
4

3 回答 3

0

尝试 

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

更多信息：链接

编辑：附加信息LINK2

于 2013-09-25T11:40:53.270 回答
0

您需要首先包含 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';
于 2013-09-25T11:45:45.083 回答
0

纯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>
于 2013-09-25T12:12:40.347 回答