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

【如何在悬停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="http://www.srcmini.com/#"> < i class="fab fa-facebook"> < /i> < /a> < a href="http://www.srcmini.com/#"> < i class="fab fa-twitter"> < /i> < /a> < a href="http://www.srcmini.com/#"> < i class="fab fa-instagram"> < /i> < /a> < /div> < /div> < /div> < ?php endwhile; ?> < ?php endif; wp_reset_postdata(); ?> < /div> < /div>

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

< img src="http://www.srcmini.com/FIRST IMAGE" onmouseover="this.src='http://www.srcmini.com/SECOND IMAGE'" onmouseout="this.src='http://www.srcmini.com/FIRST IMAGE'" />

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