时间戳

首页 > 解决方案 > 将鼠标悬停在文本/链接上时如何显示头像图像？（HTML，CSS）

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

问题描述

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

现在，图像显示在行首，如图 1 所示。 怎么样

将鼠标悬停在成员名称上时，图像刚刚显示会很好，例如 image2。 应该如何

相关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 行中看到的，我仍然是 php 菜鸟 ;-)

标签： phpcssimagepopuphover

解决方案

谢了哥们，

那真的很简单。

问候

推荐阅读