Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 1 down vote favorite

I have a list of images that are used as links and at the bottom of each image there is another image to show/hide. So far all the images show at the same time b/c they have the same class so is there any way to get around that? I don't know how to give them all the unique id.

 <div id="nav">
    <ul>
        <li id="one" ><a href="#"><img src="mikesfamilyborder.png" class="first" /><p><img src="mikesfamilybordername.png" class="name"/></p></a></li>
        <li id="two"><a href="#" ><img src="bradsfamilyborder.png" class="first" /><p><img src="bradsfamilyname.png" class="name"/></a></p></li>
        <li id="three"><a href="#" ><img src="brennerfamilyborder.png" class="first"  /><p><img src="ryanbfamilyname.png" class="name"/></a></p></li>
        <li id="four"><a href="#" ><img src="ryanfamilyborder.png" class="first" /><p><img src="ryanlfamilyname.png" class="name"/></a></p></li>
        <li id="five"><a href="#" ><img src="missydadfamilyborder.png" class="first" /><p><img src="lackeysname.png" class="name"/></a></p></li>
        <li id="six"><a href="#" ><img src="libbyfamilyborder.png" class="first" /><p><img src="libbysname.png" class="name"/></a></p></li>
    </ul>
    <p> Click Picture for Family page</p>
</div>    

$('.name').hide();

   $(".first").hover(function () {
        $(".name").stop().show();

    }, function (){
        $(".name").stop().hide();
        });
share|improve this question
add comment (requires an account with 50 reputation)

1 Answer

up vote 0 down vote accepted

You need to find the .name item that is in the same block of HTML as the one being hovered. One way to do that is to go up the parent chain from the one begin hovered to get the li tag and then use .find() from thereto find that .name item in that block. You can use this code to do that:

$('.name').hide();

$(".first").hover(function() {
    $(this).closest("li").find(".name").stop(true).show();
}, function() {
    $(this).closest("li").find(".name").stop(true).hide();
});
share|improve this answer
I got it working but it took the .next() instead of .find(). thanks it atleast put me in the right direction! – Ryan Lackey Nov 18 '12 at 16:21
@RyanLackey - I changed my code to a more robust way than .next() (it won't break if the HTML is modified slightly). – jfriend00 Nov 18 '12 at 16:36
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.