Question

OK, this should in theory be simple, but I’ve tried several things like parent, parentsUntil, next and more, and haven’t been able to figure it out.

I’ve got several divs 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.

<div class="quarterWidth boxShadow">
    <h2>category</h2>
    <img src="image.jpg" width="180" height="180" alt="xyz" class="normalPic">
    <img src="other.jpg" width="180" height="180" alt="xyz" class="hoverPic">
    <p class="button button180"><a class="trad" href="#">Traditional</a></p>
    <p class="button button180"><a class="contemp" href="#">Contemporary</a></p>
</div>

I have hidden the .hoverPic with jQuery successfully, and when I hover over the a.contemp button, I want the .normalPic image to hide, and the .hoverPic to show, and the opposite would happen when you hover over .trad.

How on earth would you achieve this with jQuery? Here is my pitiful attempt:

$(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();
    });

});

Answer 1

Personally I’d use .closest() to find the parent div and then use that as a context to find the relevant images:

$(function() {
    $('.hoverPic').hide();

    $('.contemp').hover(function(){
        var $parent = $(this).closest("DIV");
        $('.normalPic', $parent).hide();
        $('.hoverPic', $parent).show();
    });

    $('.trad').hover(function(){
        var $parent = $(this).closest("DIV");
        $('.normalPic', $parent).show();
        $('.hoverPic', $parent).hide();
    });
});