ACF 在悬停时更改背景图像

Question

一段时间以来一直在尝试解决此问题，但无法提出任何可行的方法。

我的目标是，当您将鼠标悬停在此特定 div 上时，背景图像将变为该背景图像的暗色版本。我尝试使用 filter 属性，但它会影响所有包含内容的内部 div。 （通过 JavaScript）

这是通过 ACF 在转发器字段内完成的。所以背景图像是由中继器中的子字段选择的。

我尝试了一些 Javascript，但没有找到解决方案。

还研究了替换 div，因此您会看到一个悬停 div。但是没有运气。

您将在下面找到我的代码以供参考。

任何帮助将不胜感激！

<div class="member-wrap grid-x grid-margin-x grid-margin-y">
            <?php if ( have_rows( 'branch_team_members' ) ) : ?>
                <?php while ( have_rows( 'branch_team_members' ) ) : the_row(); ?>
                    <div class="branch-member-main small-12 medium-6 large-3 cell">
                        <?php $team_member_hover_image = get_sub_field( 'team_member_hover_image' ); ?>
                        <div class="main-member-hover" style="background-image: url('<?php echo $team_member_hover_image['url']; ?>');">    
                        </div>
                        <?php $team_member_image = get_sub_field( 'team_member_image' ); ?>
                        <div class="main-member-area" style="background-image: url('<?php echo $team_member_image['url']; ?>');">
                            <h4 class="member-name-hover"><?php the_sub_field( 'team_member_name' ); ?></h4>
                            <span class="member-position-hover"><?php the_sub_field( 'team_member_position' ); ?></span>        
                            <?php the_sub_field( 'team_member_bio' ); ?>
                        </div>
                        <div class="main-member-contact">
                            <span class="member-name"><?php the_sub_field( 'team_member_name' ); ?></span>
                            <span class="member-contact"><?php the_sub_field( 'team_member_contact' ); ?></span>
                        </div>                      
                    </div>
                <?php endwhile; ?>
            <?php else : ?>
                <?php // no rows found ?>
            <?php endif; ?>
        </div>

Answer 1

尚未全部调试 - 但这可能会给您一个关于如何进行调试的想法。

此方法将为每个带有计数器的框创建一个块

<div class="member-wrap grid-x grid-margin-x grid-margin-y">
        <?php if ( have_rows( 'branch_team_members' ) ) : ?>
            <?php $counter; ?>
            <?php while ( have_rows( 'branch_team_members' ) ) : the_row(); ?>
                <?php $team_member_hover_image = get_sub_field( 'team_member_hover_image' ); ?>
                <?php $counter++; ?>

                <style type="text/css">
                    .blockNumber-<?php echo $counter; ?>{
                        background-image: url('<?php echo $team_member_image['url']; ?>');
                    }
                    .blockNumber-<?php echo $counter; ?>:hover{
                        background-image: url('<?php echo $team_member_hover_image['url']; ?>');
                    }

                </style>

                <div class="branch-member-main small-12 medium-6 large-3 cell">


                    <?php $team_member_image = get_sub_field( 'team_member_image' ); ?>
                    <div class="main-member-area blockNumber-<?php echo $counter; ?>">
                        <h4 class="member-name-hover"><?php the_sub_field( 'team_member_name' ); ?></h4>
                        <span class="member-position-hover"><?php the_sub_field( 'team_member_position' ); ?></span>        
                        <?php the_sub_field( 'team_member_bio' ); ?>
                    </div>
                    <div class="main-member-contact">
                        <span class="member-name"><?php the_sub_field( 'team_member_name' ); ?></span>
                        <span class="member-contact"><?php the_sub_field( 'team_member_contact' ); ?></span>
                    </div>                      
                </div>
            <?php endwhile; ?>
        <?php else : ?>
            <?php // no rows found ?>
        <?php endif; ?>
    </div>