title: Change entire div on mouseover
body: <p>I have implemented a function where a div gets replaced with another on hover. The issue is that I want it to disappear again on mouseout. But when the other div appears, the mouseout function kicks in as the obviously because the curser is hovering over the new dix...</p>
  
  <pre><code> $(document).ready(function(){
      $("#div1").mouseover(function() { $("#show-div2").css('visibility','visible');});
      $("#div1").mouseout(function() { $("#show-div2").css('visibility','hidden'); 
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="div1"&gt;&lt;a id="div1" href="#"&gt;&lt;img src="images/email.png"  alt="Email Marketing Services" /&gt;&lt;/a&gt;
                          &lt;/div&gt; 
  
                          &lt;div id="show-div2" style="visibility:hidden;"&gt;
                              Bla Bla Bla
                          &lt;/div&gt;  
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>#div1 {
      display: block;
      width: 91px;
      height: 91px;
      overflow: hidden;
      float: left;
      margin: 0 0 120px 0px;
  }
  
  
  #show-div2 {
      margin: -200px 0 0 -110px;
      padding: 10px;
      font-size: 14px;
      width: 270px;
      height: 340px;
      position: absolute;
      visibility: visible;
      text-align: center;
      color: black;
      background-image: url(images/email-hover.png);
      background-repeat: no-repeat;
  }
  </code></pre>