Databases
StackOverflow2013
Postsdbo
POshow / hide previous element with jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POshow / hide previous element with jquery
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload