Use jQuery to make a navigation arrow appear for a particular image in a set of images
<p>I have a "vertical" image gallery of this sort:  </p>

<pre><code>&lt;div class="image-container&gt;
    &lt;div class="nav"&gt;
        &lt;div class="next"&gt;&lt;a href="info"&gt;&lt;img src="arrow_trans.png" alt="Next" /&gt;&lt;/a&gt;  
    &lt;/div&gt;    

    &lt;div id="vert-gallery"&gt;
        &lt;div id="first-row" class="link-image"&gt;&lt;img src="Image_1.png" /&gt;&lt;/div&gt;
        &lt;div id="second-row" class="link-image"&gt;&lt;img src="Image_2.png" /&gt;&lt;/div&gt;
        &lt;div id="third-row" class="link-image"&gt;&lt;img src="Image_3.png" /&gt;&lt;/div&gt;
        &lt;div id="first-row" class="link-image"&gt;&lt;img src="Image_4.png" /&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>If I hover over any one of these images, I want a navigation arrow to appear. I've been using:  </p>

<pre><code>$(".link-image").hover(function() {
    $("div.nav").show();
    },

        function() {
    $("div.nav").hide();
});
</code></pre>

<p>This makes the navigation arrow appear over all the images (since they're of the same class). </p>

<p>How can I make it only appear over the image I'm hovering over and not the other ones?</p>

<p><strong>Edit</strong></p>

<p>In my case, <code>div.nav</code> is part of <code>image-container</code>. I might have multiple containers on the same page.</p>
