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

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

但因为它是基于CSS，它有一些局限性。 像目前没有图像显示，除非我hover标题。

这是我的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的代码：

 
 
 
  'portfolio', 'order' => 'ASC'); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); ?> 
<a href="https://stackoverflow.com/questions/27628928/how-to-make-this-swap-image-code-working-in-wordpress/">  
  
 
  

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

Answer 1

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

第一篇post为静态：

 
 
 
  'portfolio', 'order' => 'ASC'); $loop = new WP_Query( $args ); for($i=1; $iposts); $i++ ) { echo '
'. '' . $loop->posts[$i]->post_title . ''. get_the_post_thumbnail( $loop->posts[$i]->ID ). '
'; } 
 
 posts[0]->ID );  

最后发布为静态：

 
 
 
  'portfolio', 'order' => 'ASC'); $loop = new WP_Query( $args ); for($i=0; $iposts)-1; $i++ ) { echo '
'. '' . $loop->posts[$i]->post_title . ''. get_the_post_thumbnail( $loop->posts[$i]->ID ). '
'; } 
 
 posts[count($loop->posts)-1]->ID );