很多人都有Wordpress的权利。我正在尝试调整循环中的代码，以便缩略图在悬停时显示三件事：
- 帖子标题
- 带有"阅读更多"链接的二十个字的内容
- 发布日期
现在，我将它们全部显示为响应式网格（工作正常），但是悬停功能有问题。我还没有完全弄清楚如何在 php 标签中分配样式。我试图在网上找到我需要的代码，但只找到了插件。
任何帮助将不胜感激。谢谢！
.CSS：
.attach_hover {
opacity:1;
width:100%;}
.attach_hover:hover {
opacity:.5;
background-color: white;
z-index:-3;
}
.attach_text {
color: red;
font-weight: bolder;
z-index:-1;
float:left;
width:75%;
text-align:left;
padding: 51px;
}
PHP/HTML：
<div class="row">
<?php
$the_query = new WP_Query( array( 'post__not_in' => get_option( 'sticky_posts' ) ) );
if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class="col-sm-6" style="max-height:200px">
<h1><?php the_title(); ?></h1>
<?php if(has_post_thumbnail()) {
$image_src = the_post_thumbnail( 'custom-size', array( 'class' => "attach_hover" ) );
echo '<img src="' . $image_src[0] . '" width="100%" />';
echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
echo '</a>';
$content = get_the_content();
echo '<div class="attach_text">';
$trimmed_content = wp_trim_words( $content, 20, '<a href="'. get_permalink() .'"> ...Read More</a>' );
$the_title = get_the_title();
echo $trimmed_content;
echo '</div>';
}?>
</div><div class="col-sm-6" style="max-height:200px;">
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
</div>
<hr> <?php endwhile; else: ?>
想通了！损坏的图像图标来自这里：
echo '<img src="' . $image_src[0] . '" width="100%" />';
我还需要悬停时显示的容器的绝对定位 （.posttext），并且我必须消除第二行响应式引导脚手架。它将所有内容缩小到一列：
<div class="col-sm-6" style="max-height:200px;">.
最后，我在 .posttext 的元素中添加了 p 类作业。这些是.posthead .postdate和.postcontent。标题、日期和内容都在容器内有一个位置。
它仍然可以使用调整，但它是一个功能/响应式布局，允许您将鼠标悬停在循环中的帖子附件上并显示： 1. 帖子标题 2. 二十个字的内容，带有"阅读更多"链接 3. 发布日期
.CSS：
.row {
clear: both;}
.postloop {
opacity:1;
width: 100%;
height: auto;
padding: 5px 0 5px 0;
}
.posttext {
color: gray;
font-size: 100%;
z-index:3;
width: 96%;
padding:5px 10px 5px 5px;
height: 100%;
display: block;
opacity: 0;
overflow: hidden;
border: 5px solid blue;
position: absolute;
background:rgb(255,255,255);
background: transparent'9;
background:rgba(255,255,255,0.9); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
zoom: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.posttext:hover {
opacity: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.posthead{
color: blue;
font-size: 150%;
font-weight: bolder;
float:left;
text-align:left;
margin-top: -2px;
width: 80%;
vertical-align: top;
display: block;
height: 60%;
}
.postdate{
color:black;
float: right;
font-style: italic;
text-align: right;
width: 20%;
height: 60%;
vertical-align: top;
margin-top: -1px;
display: block;
}
.postcontent{
color:black;
vertical-align: text-bottom;
vertical-align: bottom;
text-align: left;
margin-top: 50px;
width: 80%;
height: 40%;
}
.readmore {
float: right;
text-align: right;
vertical-align: text-bottom;
vertical-align: bottom;
}
PHP/HTML：
<div class="row">
<?php
$the_query = new WP_Query( array( 'post__not_in' => get_option( 'sticky_posts' ) ) );
if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class="col-sm-6">
<?php
echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
echo '<div class="posttext">';
echo '<p class="posthead">';
the_title();
echo '</p><p class="postdate">';
the_date('F jS, Y');
echo '</p><p class="postcontent">';
$content = get_the_content();
$trimmed_content = wp_trim_words( $content, 10,"...".'<p class="readmore"> <a href="'. get_permalink() .'">Read More</a>' );
echo $trimmed_content;
echo '</p>';
echo '</div>';
echo '</a>';
}?>
</div>
<?php endwhile; else: ?>