title: How to show two divs on mouse over of the third div
body: <p>I am trying to implement like <code>this(click me)</code> .On the button of page you will find 4 images ,on mouse over of it,they shows info. Same things i am looking for.
  Below is my code But it is not working like the above given website.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
              $(document).ready(function(){
                $("#d2").hover(function()
                { 
                    $("#d3").show();
                });
  
                 $("#maindiv").mouseout(function()
                {
                  $("#d1").show(); 
                    $("#d3").hide();
                });
              });
  
              &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="d2" &gt; &lt;img width="160px" src="http://www.infosys.com/SiteCollectionImages/cloud-ecosystem-hub-mm.jpg" title=" Image of Tic tac toe small image" /&gt;&lt;/div&gt;
  &lt;div id="maindiv"&gt;
    &lt;div id="d3" style="display: none;"&gt;
      &lt;table width="80px" height="26px" border="1"&gt;
        &lt;tr&gt;
          &lt;td width="200px"&gt; Information/description about tic tac toe in small para. blah blah blah &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please help me to solve this issue.</p>
  
  <p><strong>My problem. Div is not hiding with good animation style. And while showing div(div name= d3). My page should little scroll down. and while on mouse out of my div(div name=maindiv).
  I to implement same like the above given  <a href="http://www.infosys.com/pages/index.aspx" rel="nofollow">link</a>.</strong></p>