我正在使用WordPress的网站上（我的第一个），但是我正在通过HTML和CSS代码调整一些小东西。
我在网格中有一堆图片，希望可以单击。当所有图片都用光标悬停在所有图片上时，会出现一个叠加层，并在其上方显示一个（永久）可单击的标题。
我希望图像或叠加层全部可点击。但是，我无法使其正常运行。我尝试将<a href>和</a> around the overlay ,but this makes the overlay disappear altogether. If I try the same basic structure (`）放在另一个位置，它似乎确实有效，所以也许它与“更高”的元素有关。
我对此很陌生，因此我可能会忽略一些非常基本的内容。我添加了一段HTML和CSS，但是由于它是WP结构的一部分，因此无法添加所有相关的CSS。
#featured-categories #categories-container .category-wrapper {
height: 300px;
display: flex;
}
@media screen and (max-width: 991px) {
#featured-categories #categories-container .category-wrapper {
height: 200px;
}
}
#featured-categories #categories-container .category-wrapper .category-title {
width: 50%;
display: inline-block;
background: #ff5722;
}
#featured-categories #categories-container .category-wrapper .category-title span {
color: white;
font-size: 36px;
display: inline-block;
float: right;
margin: 10% 5%;
}
@media screen and (max-width: 768px) {
#featured-categories #categories-container .category-wrapper .category-title span {
font-size: 22px;
}
}
#featured-categories #categories-container .category-wrapper .category-thumbs {
width: 50%;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
}
#featured-categories #categories-container .category-wrapper .category-thumbs .grid-item {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
}
#featured-categories #categories-container .category-wrapper .category-thumbs .grid-item img {
width: 100%;
max-width: none;
}
#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
}
#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-1 img {
width: auto;
height: auto;
}
.overlay {
width: 100%;
height: 100%;
margin: auto;
background: rgba(28,224,43,0);
position: absolute;
}
.category-thumb-1:hover .overlay {
background: rgba(28,0.6);
}
.category-thumb-2:hover .overlay {
background: rgba(28,0.6);
}
.category-thumb-3:hover .overlay {
background: rgba(28,0.6);
}
.post-title-1 {
color: white;
position: absolute;
left: 20%;
font-size: 28px;
margin: auto;
padding-top: 50%;
}
.post-title {
color: white;
position: absolute;
font-size: 24px;
margin: auto;
padding-top: 25%;
}
#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-2 img,#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-3 img {
align-self: center;
width: 100%;
height: 100%;
}
@media screen and (max-width: 600px) {
#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-2,#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-3 {
display: block;
}
}
#featured-categories #categories-container .category-wrapper:nth-child(even) {
flex-direction: row-reverse;
}
#featured-categories #categories-container .category-wrapper:nth-child(even) .category-title span {
float: left;
}<div class="category-wrapper category-<?php echo esc_attr( str_replace( ' ','-',strtolower( esc_html( get_cat_name($cat) ) ) ) ); ?>">
<div class="category-title">
<a href="<?php echo esc_url( get_category_link( $cat ) ) ?>" title="<?php echo esc_attr( get_cat_name($cat) ); ?>"><span><?php echo esc_html( get_cat_name($cat) ); ?></span></a>
</div>
<div class="category-thumbs">
<div class="category-thumb-1 grid-item">
<?php if ( isset($thumb[0]) && ($thumb[0] != '') ) :
echo wp_get_attachment_image( $thumb[0],'large');
else : ?>
<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/placeholder.png' ); ?>">
<?php endif; ?>
<div class="overlay" onclick="window.open('https://localhost/greentravel')" style="cursor: pointer;">
</div>
<div class="post-title-1">
<a href="<?php echo $link[0]?>" <span>
<?php echo $title[0]?>
</span>
</a>
</div>
</div>
<div class="category-thumb-2 grid-item">
<?php if ( isset($thumb[1]) && ($thumb[1] != '') ) :
echo wp_get_attachment_image( $thumb[1],'large');
else : ?>
<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/placeholder.png' ); ?>">
<?php endif; ?>
<div class="overlay">
</div>
<div class="post-title">
<a href="<?php echo $link[1]?>" <span>
<?php echo $title[1]?>
</span>
</a>
</div>
</div>
<div class="category-thumb-3 grid-item">
<?php if ( isset($thumb[2]) && ($thumb[2] != '') ) :
echo wp_get_attachment_image( $thumb[2],'large');
else : ?>
<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/placeholder.png' ); ?>">
<?php endif; ?>
<div class="overlay">
</div>
<div class="post-title">
<a href="<?php echo $link[2]?>" <span>
<?php echo $title[2]?>
</span>
</a>
</div>
</div>
</div>
</div>