如何使用 ACF 在 wordpress 中悬停特色图像

Posted 2023-05-09

【中文标题】如何使用 ACF 在 wordpress 中悬停特色图像

【英文标题】：how to hover featured img in wordpress with ACF

【发布时间】：2021-03-20 18:32:00

【问题描述】：

我有代码

<div class=""/> <a href="<?php echo get_permalink( $post->ID ); ?>"> <?php
        if ( has_post_thumbnail() )  // check if the post has a Post Thumbnail assigned to it.
            the_post_thumbnail( 'full', array( 'class'  => 'img-fluid d-block mx-auto' ) ); // show featured image
        

我应该添加什么来制作特色 img 悬停。悬停img应该从ACF字段“imghover”获取

【参考方案1】：

将此代码放入您的文件中。

<div class=""/> <a href="<?php echo get_permalink( $post->ID ); ?>"> <?php the_field('imghover');?></div>
    

【讨论】：

我认为它只会在代码中添加 hover img。我想要功能 img，当我将鼠标放在 img 上后，我会看到悬停

@stecu 是从 ACF 获取你的“imghover”值

对于悬停（mounce on img）你需要添加一些css代码来实现悬停效果...

是的，但我想要 onmouseover 和 onmouseout 函数<div class=""/> <a href="<?php echo get_permalink( $post->ID ); ?>"> <img src="<?php echo get_the_post_thumbnail($the_query->post->ID); ?>" class="img-fluid d-block mx-auto" onmouseover="this.src='<?php echo esc_url($hoverimage['url']); ?>'" onmouseout="this.src='<?php echo get_the_post_thumbnail($the_query->post->ID);?>'" /> </a></div>