如何使这个交换图像的代码在WordPress工作(how to make this swap ima

好吧，我创造了这个漂亮的教程的基础上，投资组合页面： 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多。谁能帮助？

你不需要JS：你只需要你的PHP代码输出具有相同的结构之一的示例的HTML。什么WP模板是从这个PHP代码： 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>