[英]ACF Change Background Image on Hover
一段时间以来一直试图为此找到解决方案,但一直无法想出任何有效的方法。
我的目标是,当您将鼠标悬停在此特定 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>
还没有全部调试 - 但这可能会给你一个关于如何做的想法。
此方法将为每个带有计数器的框创建一个块
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.