php - 在悬停时更改 Wordpress 特色图片

Question

我有多个特色图片分配给 wordpress 中的自定义帖子类型。我正在尝试让它在悬停时将特色图片 1 (portfolio-title-image) 更改为特色图片 2 (portfolio-hover-image)。这是我的 php 在我的 wordpress 自定义帖子页面中的特色图片来源。我尝试了各种 jquery 方法，但我的知识不足以提出解决方案。

<div class="portfolio-item">

<a href="<?php the_permalink(); ?>">

<?php if( class_exists( 'kdMultipleFeaturedImages' ) ) { kd_mfi_the_featured_image( 'portfolio-title-image', 'portfolio' );}?></a>

<?php if( class_exists( 'kdMultipleFeaturedImages' ) ) { kd_mfi_the_featured_image( 'portfolio-hover-image', 'portfolio' );}?></a>

</div>

Answer 1

一种 CSS 方法。

标记：

<div class="portfolio-item">
    <a href="<?php the_permalink(); ?>" class="cont">

      <div class="unhover_img">
        <?php if( class_exists( 'kdMultipleFeaturedImages' ) ) { kd_mfi_the_featured_image( 'portfolio-title-image', 'portfolio' );}?>
      </div>

      <div class="hover_img">
        <?php if( class_exists( 'kdMultipleFeaturedImages' ) ) { kd_mfi_the_featured_image( 'portfolio-hover-image', 'portfolio' );}?>
      </div>

    </a>
    </div>

CSS：

.hover_img {
  display: none
}
.cont:hover .unhover_img{
  display: none;
}
.cont:hover .hover_img {
  display: block;
}