父母的悬停元素

Question

I have the following loop:

<?php if( have_rows('modules') ):
    $counter = 0;
    while ( have_rows('modules') ) : the_row(); ?>
        <div class="col span_4_of_12 <?php if($counter == 0) { ?>first<?php } ?>">      
            <div class="module-nudge">
                <span class="home-module <?php if($counter == 2) { ?>module-last<?php } ?>" style="background-image:url('<?php the_sub_field('icon'); ?>');">
                    <?php the_sub_field('text'); ?>
                </span>
                <?php if( have_rows('link') ): ?>
                    <span class="module-links">
                    <?php while ( have_rows('link') ) : the_row(); ?>
                        <a class="module-inner-link" href="<?php echo the_sub_field('link'); ?>"><?php echo the_sub_field('text'); ?></a>
                    <?php endwhile; ?>
                    </span>
                <?php endif; ?>                                     
            </div>
        </div>
        <?php $counter++;
    endwhile;
endif; ?>

And the following jquery:

jQuery(function($) {
  $(document).ready(function() {      
    $(".module-nudge").hover(function(){
        $('.module-links').show();
    },function(){
        $('.module-links').hide();
    }); 
  });
});

At the moment when I hover over the '.module-nudge' element it shows the '.module-links' box. The problem I have is that it's showing/hiding all the link boxes no matter which parent you hover. How can I fix this so only the corresponding child element shows when hovering the parent?

Answer 1

Target specific link using $(this).find() to get the descendent module-links of module-nudge

$(".module-nudge").hover(function(){
    $(this).find('.module-links').show();
},function(){
    $(this).find('.module-links').hide();
});