Как сделать появление текста без javascript?

Question

[Ivan Ivanovich]

Здравствуйте. Есть следующий код -

<button class="bth">
Жми
</button>
<div class="text">Ты нажал на кнопку</div>

.bth{
  width: 200px;
  height: 50px;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.text{
  text-align: center;
}

Как сделать так, чтобы при нажатии на кнопку появлялся текст, используя visibility?

Первоначально у текста visibility hidden;

Заранее спасибо.

Answer 1

[archelon]

.bth:focus + .text {
visibility:visible
}

Comments

[Ivan Ivanovich]

archelon Cпасибо. А не подскажите как сделать так, чтобы при нажатии на другую часть экрана .text не пропадал?

[Rustam Bainazarov]

Ivan Ivanovich, либо хаком на checkbox, либо JS.

Учтите, что хак на checkbox'ах приведёт к тому, что нажатие на текст будет скрывать текст тоже, ибо они будут все в одном label.

[archelon]

Ivan Ivanovich, попробуйте на чекбоксах. см. ссылку в ответе edk55
но лучше на js так делать.

Answer 2

[edk55]

На основе этого решения можно выполнить ваше задание.