ACF 在悬停时更改背景图像

Question

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

我的目标是，当您将鼠标悬停在这个特定的 div 上时，背景图像将变为该背景图像的深色版本。我试过使用过滤器属性，但它会影响包含内容的所有内部 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>

ACF 在悬停时更改背景图像

ACF Change Background Image on Hover

javascript

wordpress

background-image

dom-events

advanced-custom-fields