如何使此交换图像代码在 wordpress 中工作

Question

好的，我在这个不错的教程的基础上创建了一个投资组合页面：http://designshack.net/articles/css/swap-your-pages-background-image-on-navigation-hover/

但是因为是基于css的，所以有一些限制。就像目前没有图像显示，除非我悬停标题。

这是我的 CSS：

.container_imd {
  position: relative;
  overflow: hidden;
  margin: 100px auto;
  width: 800px;
  height: 500px;
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
}



.container_imd li img {
  position: absolute;
  top: 0;
  left: 800px;
  z-index: -50;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

/*NAV*/
.container_imd nav {
  width: 170px;
  height: 500px;
  background: #fff;
}

/*UL*/
.container_imd ul {
  width: 800px;
  height: 500px;
  list-style: none;
}

.container_imd li a {
  z-index: 1;
  display: block;
  padding-left: 20px;
  width: 150px;
  height: 30px;
  background: white;
  color: #444;
  text-decoration: none;
  font: 14px/30px Helvetica, Verdana, sans-serif;
}

.container_imd li:nth-child(1) {
  padding-top: 50px;
}

.container_imd li a:hover {
  background: #eee;
}

.container_imd li a:hover + img {
  left: 0px;
}

& 这里是来自 WordPress 的代码：

<div class="container_imd">
  <nav>
    <ul>
        <?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
      <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      <?php the_post_thumbnail() ?>
      </li>
      <?php endwhile; ?> 
    </ul>
  </nav>
</div>

如何在此处显示最后一个列表项的图像？所以它总是可见的，即使没有人悬停任何标题。 ＆当有人悬停任何其他标题时，它将替换图像 * 显示该帖子附带的图像。我知道可以使用 javascript，但我不太了解 javascript。谁能帮忙？

Answer 1

您不需要 JS：您只需要您的 PHP 代码来输出与示例中的结构相同的 HTML。这个 PHP 代码来自哪个 WP 模板：page.php？对于最后一张图片，您需要在循环之外添加一个额外的 <img> 标签和 nav 标签，即使没有悬停链接，它也会始终显示。

第一个静态帖子：

<div class="container_imd">
  <nav>
    <ul>
        <?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
        $loop = new WP_Query( $args );
        for($i=1; $i<count($loop->posts); $i++ ) {
            echo '<li>'.
                 '<a href="' . get_permalink( $loop->posts[$i]->ID ) . '">' . $loop->posts[$i]->post_title . '</a>'.
                 get_the_post_thumbnail( $loop->posts[$i]->ID ).
                 '</li>';
        }
    </ul>
  </nav>
  <?php get_the_post_thumbnail( $loop->posts[0]->ID );
</div>

最后一个帖子是静态的：

<div class="container_imd">
  <nav>
    <ul>
        <?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
        $loop = new WP_Query( $args );
        for($i=0; $i<count($loop->posts)-1; $i++ ) {
            echo '<li>'.
                 '<a href="' . get_permalink( $loop->posts[$i]->ID ) . '">' . $loop->posts[$i]->post_title . '</a>'.
                 get_the_post_thumbnail( $loop->posts[$i]->ID ).
                 '</li>';
        }
    </ul>
  </nav>
  <?php get_the_post_thumbnail( $loop->posts[count($loop->posts)-1]->ID );
</div>