title: show / hide previous element with jquery
body: <p>OK, this should in theory be simple, but I've tried several things like <code>parent</code>, <code>parentsUntil</code>, <code>next</code> and more, and haven't been able to figure it out.</p>
  
  <p>I've got several <code>div</code>s as shown below, each with a hidden and a visible image, and two visible buttons. when you hover over a button, it should show or hide the image that is shown / hidden.</p>
  
  <pre><code>&lt;div class="quarterWidth boxShadow"&gt;
      &lt;h2&gt;category&lt;/h2&gt;
      &lt;img src="image.jpg" width="180" height="180" alt="xyz" class="normalPic"&gt;
      &lt;img src="other.jpg" width="180" height="180" alt="xyz" class="hoverPic"&gt;
      &lt;p class="button button180"&gt;&lt;a class="trad" href="#"&gt;Traditional&lt;/a&gt;&lt;/p&gt;
      &lt;p class="button button180"&gt;&lt;a class="contemp" href="#"&gt;Contemporary&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have hidden the <code>.hoverPic</code> with jQuery successfully, and when I hover over the <code>a.contemp</code> button, I want the <code>.normalPic</code> image to hide, and the <code>.hoverPic</code> to show, and the opposite would happen when you hover over <code>.trad</code>.</p>
  
  <p><strong>How on earth would you achieve this with jQuery? Here is my pitiful attempt:</strong></p>
  
  <pre><code>$(function() {
      $('.hoverPic').hide();
  
      $('.contemp').hover(function(){
          $(this).parentsUntil('.boxShadow').next('.normalPic').hide();
          $(this).parentsUntil('.boxShadow').next('.hoverPic').show();
      });
  
      $('.trad').hover(function(){
          $(this).parentsUntil('.boxShadow').next('.normalPic').show();
          $(this).parentsUntil('.boxShadow').next('.hoverPic').hide();
      });
  
  });
  </code></pre>