双亲悬停单元

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

当我在“. box n心思”元素上悬停时，它会显示“.box link”框。我遇到的问题是，它显示/隐藏了所有链接框，不管您在哪个父服务器上悬停。如何解决此问题，以便在悬停父元素时只显示相应的子元素？

Answer 1

使用$(this).find()实现特定目标链接以获取module-nudge的后代module-links

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