Блог

Главная - Вопросы по программированию - Элементы, не появляющиеся при установке видимости в видимое и использовании :проверенный псевдокласс

Элементы, не появляющиеся при установке видимости в видимое и использовании :проверенный псевдокласс

#css #visibility #display #togglebutton #pseudo-class

Вопрос:

Ну, то, что я пытаюсь сделать, это скрыть/показать фотографии и историю изображений, когда пользователь нажимает на «кнопку», где написано «значок». Мне не нужен никакой javascript, так как я читал, что это можно сделать только с помощью css. Я использовал псевдокласс checked:и последовал примеру MDN, так как это именно то, что я хочу сделать (заставить их появляться/исчезать).

Проблема, с которой я сталкиваюсь, заключается в том, что я нажимаю на флажки. Элементы не отображаются. Видимость элементов остается в состоянии коллапса, несмотря на то, что я установил ее в видимое.

 .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>

Вот как это будет выглядеть, когда элементы изображения и изображения будут иметь видимость, установленную в поле «Видимый».
изображение с видимостью в видимом

Заранее спасибо. Я слишком долго разбирался с этим и не знаю, что делать.

Ответ №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" 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">
        <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" 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">
        <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" 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>
Метки: ,