show / hide previous element with jquery
<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>
