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

当我将鼠标悬停在＆＃39; .module-nudge＆＃39;它显示了＆＃39; .module-links＆＃39;框。我遇到的问题是它显示/隐藏了所有链接框，无论您悬停哪个父级。我如何解决这个问题，以便在悬停父级时只显示相应的子元素？

Answer 1

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

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

父母的悬停元素

1 个答案: