title: flickering when mouse over, .hover() show/hide div(s)
body: <p>Good day,</p>
  
  <p>I have these div(s) containers with 2 inner div(s) holding (a) image &amp; (b) text description respectively.</p>
  
  <p>I hide these (b) text description div(s) using .hide() when page load, then using .hover() to show/hide the hidden text description div, sample code below:</p>
  
  <pre><code>&lt;div class="projectBlock"&gt;
  &lt;div class="imgBlock" id="imgBlock1"&gt;&lt;a href="http://www.tesco.com.my" target="_blank"&gt;&lt;img src="http://i23.photobucket.com/albums/b395/yiyonglee/thumb-project-tesco.jpg"&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;div class="descBlock" id="descBlock1"&gt;Tesco Malaysia&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The show/hide works fine, except if mouseover area hit somewhere inside the descrption text area, the div container flickers while moving around.</p>
  
  <p>my jQuery portion:</p>
  
  <pre><code>$('.descBlock').hide();
  
  $('#imgBlock1').hover(function () {
      $('#descBlock1').show();
  }, function () {
      $('#descBlock1').hide();
  });
  
  $('#imgBlock2').hover(function () {
      $('#descBlock2').show();
  }, function () {
      $('#descBlock2').hide();
  });
  </code></pre>
  
  <p>Demo here: <a href="http://jsfiddle.net/ewLrA/1/" rel="nofollow">jsfiddle</a></p>
  
  <p>Why is it acting in such way? Thanks in advance.</p>