title: jQuery - show and hide div on hover using closest selector
body: <p>I am trying to simply achieve the show/hide feature on hover using the <code>hover</code> function of jquery.</p>
  
  <p>However not able to show and hide the particular <code>div</code>. When I hover over the current <code>span</code> tag I want only the current(closest) <code>div</code> to hide and the closest or next possible <code>div</code> to be shown. </p>
  
  <p>But currently since the class names are same, it is showing all the <code>divs</code></p>
  
  <p><a href="http://jsfiddle.net/u9xorn8b/3/" rel="nofollow">FIDDLE HERE</a></p>
  
  <p>HTML structure:</p>
  
  <pre><code>&lt;div class="parentCat"&gt;
      &lt;div class="imageContainer"&gt;
          &lt;span class="hoverEffect"&gt;Some Image&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="showContainer"&gt;
          &lt;span&gt;New Image&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="parentCat"&gt;
      &lt;div class="imageContainer"&gt;
          &lt;span class="hoverEffect"&gt;Some Image&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="showContainer"&gt;
          &lt;span&gt;New Image&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>