Hover элемент родителя

Question

У меня есть следующий цикл:

<?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; ?> 

И следующий JQuery:

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

На тот момент, когда я наведите курсор мыши на элементе «.module-Сдвинуть» он показывает '.module-links'. Проблема в том, что она показывает/скрывает все ящики ссылок независимо от того, какой родитель вы наведете. Как я могу это исправить, так что только соответствующий дочерний элемент отображается при наведении родителя?

Answer 1

Целевая конкретная ссылка с помощью $(this).find() получить потомка module-links из module-nudge

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