Javascript 父元素的悬停元素

我有以下循环：

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

---

当我将鼠标悬停在“.module-nudge”元素上时，它会显示“.module-links”框。我的问题是，它显示/隐藏了所有链接框，而不管您将鼠标悬停在哪个父对象上。如何解决此问题，以便在悬停父对象时仅显示相应的子元素？

使用

$（this.find（）

获取

模块轻推的子对象
模块链接

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

使用
$（this）.find（）
获取
模块微移的子代
模块链接

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