将鼠标悬停在 text/link 上时如何显示头像？ (html, CSS)

Question

我创建了一个成员列表，所有成员都通过 php 请求列出。到目前为止一切正常，但现在我希望在将鼠标悬停在成员名称上时，头像图片只显示出来。

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

当鼠标悬停在成员姓名上时，如果图片直接显示就好了，比如 image2。 how it should be

相关 php 请求的代码是这样的。在 figure-tag 中是头像，在第一和第二行“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 行中看到的那样，我仍然是 php 菜鸟 ;-)

Answer 1

您可以根据自己的喜好使其变得简单或复杂。在最基本的情况下，您可以这样做：

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

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

Answer 2

谢谢伙计，

真的很简单。

此致

将鼠标悬停在 text/link 上时如何显示头像？ (html, CSS)

How do I show the avatar image when hovering over an text/link? (html, CSS)

css

php

image

popup

hover