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

好的，我在这个不错的教程的基础上创建了一个公文包页面：

但是因为它是基于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了解不多。有人能帮忙吗？

您不需要JS：您只需要PHP代码就可以输出与示例中结构相同的HTML。这个PHP代码来自哪个WP模板：

page.PHP

？对于最后一幅图像，您需要在循环外部添加一个额外的

标记和

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>