Question

I have a “vertical” image gallery of this sort:

<div class="image-container>
    <div class="nav">
        <div class="next"><a href="info"><img src="arrow_trans.png" alt="Next" /></a>  
    </div>    

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

If I hover over any one of these images, I want a navigation arrow to appear. I’ve been using:

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

        function() {
    $("div.nav").hide();
});

This makes the navigation arrow appear over all the images (since they’re of the same class).

How can I make it only appear over the image I’m hovering over and not the other ones?

Edit

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

Answer 1

Adding this to the selectors should work if the nav div is inside each of the link-image divs.

$(".link-image").hover(function() {
        $("div.nav", this).show();
    },
    function() {
        $("div.nav", this).hide();
    }
);

JSFiddle Example