Javascript 如何在第一个div上显示鼠标上的两个div，并在鼠标外隐藏相同的两个div_Javascript_Jquery_Html_Css

Javascript 如何在第一个div上显示鼠标上的两个div，并在鼠标外隐藏相同的两个div

javascript jquery html css

Javascript 如何在第一个div上显示鼠标上的两个div，并在鼠标外隐藏相同的两个div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个分区显示我的游戏名称（分区2）当用户在这个（div2）上移动鼠标时，两个div（div1和div3）应该同时打开 div（div1和div3）将包含哪些内容： div1应该显示我的游戏的小图像，而第三部分应该对我的游戏进行小的描述 div的位置：第二行应该可以看到div2。（在两个div div1和div3的中间） div1应该在顶部可见。（游戏图片） div3应该在底部可见当用户将鼠标从div1和div3中移出光标时，这两个div应该隐藏并保持打开div2 我试图用下面

我有一个分区显示我的游戏名称（分区2）当用户在这个（div2）上移动鼠标时，两个div（div1和div3）应该同时打开

div（div1和div3）将包含哪些内容：

div1应该显示我的游戏的小图像，而
第三部分应该对我的游戏进行小的描述

div的位置：

第二行应该可以看到div2。（在两个div 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>


此示例将在游戏链接上显示游戏描述（上面的div将显示游戏图像，下面的div将显示游戏详细信息）
$（文档）.ready（函数（）{
$（“#d1”）.hover（函数（）
{
$（“#d1”）.hide（）；
$（“#d2”）.show（）；
$（“#d3”）.show（）；
});
$（“#maindiv”）.mouseout（函数（）
{
$（“#d1”）.show（）；
$（“#d2”）.hide（）；
$（“#d3”）.hide（）；
});
});
Tic Tac Toe（这应该隐藏在该div上的鼠标上）
小段落中有关tic tac toe的信息/说明。废话废话

试试这个：

你的代码似乎对我有用？唯一有点奇怪的是div有点小，所以你必须找到悬停的最佳位置，这样图像和描述就会显示出来。你能说得更具体一点吗？我在Chrome中运行了它。@aug我正在尝试这样实现（检查链接，在页面的按钮上你会发现4个图像，在鼠标上方，它们显示信息）@aug但是我的代码不时髦，它没有在div1和div3的中间显示我的div2。而且我的代码也不准确。一个问题，为什么这个信息是“Tic Tac Toe”（这应该隐藏在这个div上的鼠标上）“在显示两个div（d2和d3）时没有隐藏。@AshutoshSingh只是取消了这行的注释：$（“#d1”）.hide（）；现在可以了。是否可以很好地设置动画。打开div时，它应该以良好的动画打开。关闭时也是如此。如果我放置slideUp（）&slideDown（）然后代码不能正常运行。请检查它并让我知道解决方案。这在以前是可以的。但是在img div和info div之间仍然有很大的差距。

  <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();
      });
    });