0

ゲーム名 (div2) を表示している 1 つの div があります。ユーザーがこれ (div2) にマウスを移動すると、2 つの div (div1 & div3) が同時に開く必要があります。

div(div1 & div3) に含まれるもの:

  • div1 にはゲームの小さな画像が表示されるはずですが、
  • div3 には、ゲームに関する小さな説明が表示されるはずです。

div の位置:

  • div2 は 2 行目に表示されるはずです (2 つの div1 と div3 の中間)。

  • div1 が一番上に表示されるはずです。 (ゲーム イメージ)

  • div3 が下部に表示されるはずです。

また、ユーザーがカーソルを div1 と div3 から離すと、これらの div は両方とも非表示になり、div2 を開いたままにする必要があります。

以下のコードで問題を解決しようとしましたが、まったく役に立ちませんでした。以下のコードを確認して、問題の適切な解決策を提案してください。

私のコード:

       <html>
            <head>
                <title>This example will showw game description on over the game link (above div will show game image and below will show game details info)</title>
        <link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>  
        <script>

        $(document).ready(function(){
          $("#d1").hover(function()
          {
            $("#d1").hide();
             $("#d2").show();
              $("#d3").show();
          });

           $("#maindiv").mouseout(function()
          {
            $("#d1").show();
             $("#d2").hide();
              $("#d3").hide();
          });
        });

        </script>
        </head>

        <body>
            <div id="maindiv">
            <div id="d1">Tic Tac Toe(This should hide on mouse over this div)</div>
            <div id="d2" style="display: none;"> <img src="http://www.infosys.com/SiteCollectionImages/cloud-ecosystem-hub-mm.jpg" title=" Image of Tic tac toe small image" /></div>
        </div> 
             <div id="d3" style="display: none;">
                 <table width="80px" height="26px" border="1">
                     <tr>
                          <td width="200px"> Information/description about tic tac toe in small para. blah blah blah  </td>
                     </tr>
                 </table>

             </div>

        </body>
        </html>
4

1 に答える 1

0

これを試してください：http://jsbin.com/uyoxip/1/edit

  <div id="maindiv" style='margin:0 auto; width:100%;'>
       <div id="d2" style="display: none; float:left; width:500px;"> 
            <img src="http://www.infosys.com/SiteCollectionImages/cloud-ecosystem-hub-mm.jpg" title=" Image of Tic tac toe small image" />
       </div>
       <div id="d1" style='float:left; width:500px;'>
            Tic Tac Toe(This should hide on mouse over this div)
       </div>
       <div id="d3" style="display: none; float:left; width:500px;">
             <table width="80px" height="26px" border="1">
                 <tr>
                    <td width="200px"> 
                       Information/description about tic tac toe in small para. blah blah blah  
                    </td>
                 </tr>
             </table>
          </div>
       </div>

脚本：

 $(document).ready(function(){
      $("#maindiv").hover(function(){

         $("#d2").stop().slideDown();
         $("#d3").stop().slideDown();
         $("#d1").stop().slideUp();

      },function(){

        $("#d1").stop().slideDown();
        $("#d2").stop().slideUp();
        $("#d3").stop().slideUp();
      });
    });
于 2012-11-15T06:50:28.540 に答える