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>

ACF悬停时更改背景图像

1 个答案: