将可见性设置为可见并使用 :checked 伪类时元素不出现

Posted 2023-02-21

【中文标题】将可见性设置为可见并使用 :checked 伪类时元素不出现

【英文标题】：Elements not appearing when setting visibility to visible and using :checked pseudo-class

【发布时间】：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"  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"  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"  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

提前致谢。我处理这个问题太久了，不知道该怎么办。

【参考方案1】：

将复选框移到上方。

.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">
    <input type="checkbox"  id="expand-toggle">
    <input type="checkbox"  id="expand-toggle2">
    <input type="checkbox"  id="expand-toggle3">

    <div class="card">
      <div class="buttonSpace"> 
        <label for="expand-toggle"> <span class="buttonPicture"> "icon"</span> </label>
      </div>
      <figure id="f1">
        <img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg"  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">
        <label for="expand-toggle2"> <span class="buttonPicture"> "icon" </span> </label>
      </div>
      <figure id="f2">
        <img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg"  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">
        <label for="expand-toggle3"> <span class="buttonPicture"> "icon" </span> </label>
      </div>
      <figure id="f3">
        <img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg"  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>