-1

wordpress のカスタム投稿タイプに複数のアイキャッチ画像が割り当てられています。注目の画像1（ポートフォリオタイトル画像）が注目の画像2（ポートフォリオホバー画像）に変わるようにしようとしています。これが、注目の画像の元となるワードプレスのカスタム投稿ページの私のphpです。私はさまざまな 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>
4

1 に答える 1

0

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;
}
于 2013-09-14T14:43:46.483 に答える