将鼠标悬停在文本/链接上时如何显示头像图像？（HTML，CSS）答案

【问题标题】：How do I show the avatar image when hovering over an text/link? (html, CSS)将鼠标悬停在文本/链接上时如何显示头像图像？（HTML，CSS）
【发布时间】：2021-03-12 01:26:28
【问题描述】：

我创建了一个成员列表，所有成员都由 php 请求列出。到目前为止效果很好，但现在我希望在将鼠标悬停在成员名称上时显示头像图像。

现在，图像显示在行首，如图 1 所示。 How it is

如果将鼠标悬停在成员名称上（例如 image2）时，图像只显示出来就好了。 how it should be

相关php请求的代码是这样的。在图形标签中是头像，在第一和第二“printf”行中是名称。

<div class="wp-team-member wp-team-list-item author-<?php echo esc_attr( $user->ID ); ?> <?php echo esc_attr( $role_class ); ?>">
<figure class="wp-team-member-avatar author-image">
    <?php echo wp_team_list()->get_avatar( $user ); // phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped ?>
</figure>   

<?php
if ( '' !== $last_name  ) {
    printf( '<p class="wp-team-member-description"><a href="#"><strong>%s, ', wp_kses_post( $last_name ) );
    printf( '%s</strong> </a>- ', wp_kses_post( $first_name ) );
    printf( 'LK Jahrgang %s - ', wp_kses_post( $lk_jahrgang ) );
    printf( '%s, ', wp_kses_post( $ehem_schule  ) );
    printf( '%s, ', wp_kses_post( $position ) );
    printf( '<span style="color:red;">%s</span>, ', wp_kses_post( $farbe ) );
    printf( '%s, ', wp_kses_post( $billing_address_1 ) );
    printf( '%s ', wp_kses_post( $billing_postcode ) );
    printf( '%s</p>', wp_kses_post( $billing_city  ) );
}

如果有人能帮我解决这个问题，我将不胜感激。正如您在 printf-lines 中看到的，我仍然是 php 菜鸟 ;-)

【问题讨论】：

标签： php css image popup hover

【解决方案1】：

您可以根据自己的喜好将其设置为简单或复杂。最基本的，你可以这样做：

.wp-team-member figure { display: none; }
.wp-team-member:hover figure { display:block; }

但是，根据包含元素的结构，您可能希望将 opacity 从 0 切换到 1，而不是切换显示模式。

【讨论】：

【解决方案2】：

谢谢老哥，

这真的很简单。

问候

【讨论】：