【发布时间】：2021-11-13 18:54:27
【问题描述】：
好吧，我要做的是在用户单击“按钮”时隐藏/显示图片和图片的历史记录，其中显示“图标”。我不需要任何 javascript，因为我读过只能使用 css 来完成它。我使用了checked:pseudo-class并遵循MDN's example，因为这正是我想要做的（让它们出现/消失）。
我面临的问题是单击复选框时。元素不显示。尽管我将其设置为可见，但元素的可见性仍然处于折叠状态。
.cardsContainer{
display: flex;
justify-content: space-between;
}
#f1, #f2, #f3{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
visibility: collapse;
}
.backgroundHistory, .backgroundHistory2, .backgroundHistory3{
margin: 1em 0em 0em 0em;
padding: 1.5em;
background: #eceddd;
border-style: solid;
border-color: black;
text-align: justify;
margin-top: 0px;
visibility: visible;
}
.buttonPicture{
display: inline-block;
width: 32px;
height: 32px;
background: url('https://cdn.icon-icons.com/icons2/1904/PNG/512/downarrow_121316.png') no-repeat;
}
.buttonSpace{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.card{
background-color: #e7edb4;
margin: 0px;
border-style: groove;
border-color: white;
padding-bottom: 0px;
margin-left: .5em;
margin-right: .5em;
}
#expand-toggle, #expand-toggle2, #expand-toggle3{
display: none;
}
/*monaLisa*/
#expand-toggle:checked ~ * #f1{
visibility: visible;
}
#expand-toggle:checked ~ * .backgroundHistory{
visibility: visible;
}
/*Artemisia*/
#expand-toggle2:checked ~ * #f2{
visibility: visible;
}
#expand-toggle2:checked ~ * .backgroundHistory2{
visibility: visible;
}
/*the persistence of memory*/
#expand-toggle3:checked ~ * #f3{
visibility: visible;
}
#expand-toggle3:checked ~ * .backgroundHistory3{
visibility: visible;
}<div class="cardsContainer">
<div class="card">
<div class="buttonSpace">
<input type="checkbox" id="expand-toggle">
<label for="expand-toggle"> <span class="buttonPicture"> "icon"</span> </label>
</div>
<figure id="f1">
<img src="imgs/monaLisa.jpg" alt="Mona Lisa" class="pictureAdjustment">
<figcaption class="imageHistory">
<i>Leonardo da Vinci</i> (1503) <br>
</figcaption>
</figure>
<p class="backgroundHistory">
It was painted between 1,503 and 1,519, when Leonardo da Vinci lived in Florence, Italy.
Currently, it's not known who the woman in the painting was; there's doubt about if she was
really a woman.
</p>
</div>
<div class="card">
<div class="buttonSpace">
<input type="checkbox" id="expand-toggle2">
<label for="expand-toggle2"> <span class="buttonPicture"> "icon" </span> </label>
</div>
<figure id="f2">
<img src="imgs/kill.jpeg" alt="Artemisia" class="pictureAdjustment">
<figcaption class="imageHistory">
<i>Artemisia Gentileschi</i> (1620) <br>
</figcaption>
</figure>
<p class="backgroundHistory2">
This is an artwork by Artemisia Gentileschi, it's an oil painting. This painting is inspired on an Old Statement Bible story.
This painting is a second attempt from the same Bible story, which was done previously. This is the most recognizable painting made
by Artemisia Gentileschi.
</p>
</div>
<div class="card">
<div class="buttonSpace">
<input type="checkbox" id="expand-toggle3">
<label for="expand-toggle3"> <span class="buttonPicture"> "icon" </span> </label>
</div>
<figure id="f3">
<img src="imgs/tiempo.jpg" alt="Salvador Dalí" class="pictureAdjustment">
<figcaption class="imageHistory">
<i>Salvador Dalí</i> (1931)<br>
</figcaption>
</figure>
<p class="backgroundHistory3">
It was painted by spanish painter Salvador Dalí. Dalí painted this artwork when he was 28 years old and
the surrealism movement was at its peak. By this time, he was officially joined with surrealist artists and
developed his "Paranoiac Critical method"
</p>
</div>
</div>这就是图片和图片元素的可见性设置为可见时的样子。 picture with visibility in visible
提前致谢。我处理这个问题太久了，不知道该怎么办。
【问题讨论】：
标签： css visibility display togglebutton pseudo-class