如何在悬停CSS上显示博客特色图片？

我几乎已经完成了网站的第一个自定义主题。我创建了一些自定义帖子类型来管理投资组合和工作人员部分。代码没有问题, 但是客户端询问当用户将鼠标悬停在其上时是否可以更改人员图像。有什么办法可以在wordpress中做到这一点？

这是我的代码示例

<div class="team-boxed">
<?php
  $args = array(
    'post_type' => 'team'
  );
  $team = new WP_Query($args);
?>
        <div class="intro">
            <h2 class="text-center text-uppercase" id="">Team</h2>
        </div>

        <div class="row people">
<?php if( $team->have_posts() ): while( $team->have_posts() ): $team->the_post(); ?>
            <div class="col-md-6 col-lg-4 item">
                <div class="box">
                    <div class="rounded-circle" style="background-image:url('<?php the_post_thumbnail_url('full'); ?>')" id="staff-pic"></div>
                    <h3 class="team-name"><?php the_title(); ?></h3>
                    <p class="description text-center"><?php echo get_the_content(); ?></p>
                    <div class="social"><a href="#"><i class="fab fa-facebook"></i></a><a href="#"><i class="fab fa-twitter"></i></a><a href="#"><i class="fab fa-instagram"></i></a></div>
                </div>
            </div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
        </div>
</div>

#1

最简单的方法是像这样输出。例如, 如果你在自定义元数据中存储了ALT图像, 则可以将其用作第二图像。

<img src="FIRST IMAGE" onmouseover="this.src='SECOND IMAGE'" onmouseout="this.src='FIRST IMAGE'" />

其他选项包括输出一些其他CSS或JS。但是你也可以使用具有数据属性的通用JS, 也许可以通过更多选项, 动画等来处理它。