三个链接之一,尽管有完全相同的HTML和CSS代码,但仍无法工作



我已经用相同的HTML&CSS(除了文件名(转换为链接,但三个中的第一个不起作用。有什么建议吗?

我想补充一点,我可以点击第一行的figcaption,但由于某种原因,当我添加链接时,所有figcaption都变成了不可见的。我也试着查找如何解决这个问题,我唯一能找到的就是添加z索引:999;到css,但这也不起作用

.features {
background: white;
color: gray;
padding: 50px;
display: flex;
flex-direction: row;
font-family: tahoma;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 170px;
height: 170px;
}
<section class="features">
<figure>
<img src="images/seed.jpeg" alt="Close up of a man planting a seed"><a href="whatwedo.html">
<figcaption>What We Do</figcaption> 
</figure>
<figure>
<img src="images/recycle.jpeg" alt="Smart phone with recycle image on screen on top of a reusable carrier bag"><a href="whatyoucando.html">
<figcaption>What You Can Do</figcaption>
</figure>
<figure>
<img src="images/volunteer.jpeg" alt="Man wearing a white shirt with volunteer printed on it"><a href="support.html">
<figcaption>Support Us</figcaption>
</figure>
</section>

:/

设法弄清楚了,我对它的简单性感到非常恼火,因为在最终尝试之前,我尝试了很多不同的东西:

评论中的内容和我以前一样,我只需要翻转一下标签。是的,就这么简单。该死的html

<section class="features">
<figure>
<!-- <img src="images/seed.jpeg" alt="Close up of a man planting a seed"><a href="whatwedo.html"> -->
<a href="whatwedo.html"><img src="images/seed.jpeg" alt="Close up of a man planting a seed">
<figcaption>What We Do</figcaption> 
</figure>
<figure>
<!-- <img src="images/recycle.jpeg" alt="Smart phone with recycle image on screen on top of a reusable carrier bag"><a href="whatyoucando.html"> -->
<a href="whatyoucando.html"><img src="images/recycle.jpeg" alt="Smart phone with recycle image on screen on top of a reusable carrier bag">
<figcaption>What You Can Do</figcaption>
</figure>
<figure>
<!-- <img src="images/volunteer.jpeg" alt="Man wearing a white shirt with volunteer printed on it"><a href="support.html"> -->
<a href="support.html"><img src="images/volunteer.jpeg" alt="Man wearing a white shirt with volunteer printed on it">
<figcaption>Support Us</figcaption>
</figure>
</section>

最新更新