javascript - ACF 在悬停时更改背景图像

Question

一段时间以来一直在尝试为此找到解决方案，但一直未能想出任何可行的方法。

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

这是通过 ACF 在转发器场内完成的。因此，背景图像由转发器内的子字段选择。

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

还查看了替换 div，因此您会看到一个 hover-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

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

此方法将为每个带有计数器的盒子创建一个 block

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