4
\$\begingroup\$

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 because they have the same class.

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>

JavaScript:

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

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

}, function() {
    $(".name").stop().hide();
});
\$\endgroup\$

2 Answers 2

Reset to default
2
\$\begingroup\$

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();
});
\$\endgroup\$
2
  • \$\begingroup\$ I got it working but it took the .next() instead of .find(). thanks it atleast put me in the right direction! \$\endgroup\$
    – Ryan Lackey
    Commented Nov 18, 2012 at 16:21
  • \$\begingroup\$ @RyanLackey - I changed my code to a more robust way than .next() (it won't break if the HTML is modified slightly). \$\endgroup\$
    – jfriend00
    Commented Nov 18, 2012 at 16:36
1
\$\begingroup\$

Miskate

I'll point a miskate in the HTML.

The second li and onwards, the p element should be closed first and then. But, in your markup a is first closed and then p which is semantically wrong.

Here's the formatted HTML for second li.

<li id="two">
    <a href="#">
        <img src="bradsfamilyborder.png" class="first" />
        <p>
            <img src="bradsfamilyname.png" class="name"/>
    </a>
</p> <!--- Did I closed this right? --->
</li>

It should be

<li id="two">
    <a href="#"><img src="bradsfamilyborder.png" class="first" />
        <p><img src="bradsfamilyname.png" class="name" /></a>
    </p>
</li>

Review

The IDs an class names are very generic. Chances are that they will clash with other page/developers styles and will not work as expected. When working with jQuery and CSS, it's very important to name the things properly. You can namespace them with some prefix - nav- in this case.

The class names name and first doesn't tell anything about what it contains or direct wrong message. family-name and family-border-name is much better.

$('.name').hide() will hide the elements on page load causing flicker. I'll suggest...(see Improvements section below)

stop() is used to stop ongoing animation. As no animation is used(or the code is not shown?), it can be removed.

Improvement

Here is the Demo of jfriend00's answer. Although, this is correct, this can be done without jQuery at all.

Note: Here, I'll use old markup provided in the question.

$('.name').hide(); can be written in CSS as

.name {
    display: none;
}

This has better effect as compared to jQuery counterpart as it will not show flicker when CSS is included in <head>.

And the hover() can be written as below using :hover pseudo-class and Adjacent Sibling Selector

.first:hover + p > .name {
    display: block;
}

which basically says, when hover on .first, select next sibling p and it's direct children >, having name class.

Demo:Although, you cannot see images, you can see it works as expected when hover over an image.

#nav .family-border-name {
    display: none;
}
#nav .family-name:hover + p > .family-border-name {
    display: block;
}
<div id="nav">
    <ul>
        <li>
            <a href="#"><img src="mikesfamilyborder.png" class="family-name" />
                <p><img src="mikesfamilybordername.png" class="family-border-name" /></p>
            </a>
        </li>
        <li>
            <a href="#"><img src="bradsfamilyborder.png" class="family-name" />
                <p><img src="bradsfamilyname.png" class="family-border-name" /></p>
            </a>
        </li>
        <li>
            <a href="#"><img src="brennerfamilyborder.png" class="family-name" />
                <p><img src="ryanbfamilyname.png" class="family-border-name" /></p>
            </a>
        </li>
        <li>
            <a href="#"><img src="ryanfamilyborder.png" class="family-name" />
                <p><img src="ryanlfamilyname.png" class="family-border-name" />
                </p>
            </a>

        </li>
        <li>
            <a href="#"><img src="missydadfamilyborder.png" class="family-name" />
                <p><img src="lackeysname.png" class="family-border-name" />
                </p>
            </a>
        </li>
        <li>
            <a href="#"><img src="libbyfamilyborder.png" class="family-name" />
                <p><img src="libbysname.png" class="family-border-name" />
                </p>
            </a>
        </li>
    </ul>
    <p> Click Picture for Family page</p>
</div>

\$\endgroup\$
1
  • \$\begingroup\$ Note that there is one intentional miskate in the answer, don't edit it. \$\endgroup\$
    – Tushar
    Commented Jan 1, 2017 at 6:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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