一键更改文本答案

【问题标题】：Changing text with one click一键更改文本
【发布时间】：2017-04-15 09:40:43
【问题描述】：

我正在用 Html 和 Css 构建一个网站。

当您单击该网站的链接时，会出现黑色背景和一些白色文本。（让我们说，“你好！点击开始！”）然后当你点击它时，一个图像会淡入，一些新文本被旧文本替换，顶部也会出现一个导航栏。

我已经解决了褪色图像的问题，没问题。但是文本是最困难的（我对文本使用了 fadeAndScale 动画）。任何帮助将不胜感激！

这是我目前得到的：

Website html code Website css code

（注意：我不能使用 Javascript 和 Cloud 9...对不起...我也是这个网站的新手）

【问题讨论】：

请提供您目前在问题中所拥有的代码的相关部分，否则很难为您提供帮助。
@PatrickHund 编辑了问题...如果我编辑问题，是否会通知发表评论的人？
更好，但请在您的问题中包含代码。您提供的链接将来可能会失效，从而使您的问题变得毫无用处。

标签： html css cloud9

【解决方案1】：

查看帮助（点击在没有js的div上有效，你需要tabindex）。当您提出问题时，请提供您的代码（不是代码图像：）

.box {
  color: #FFF;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  background-color: #000;
  padding: 30px;
}

.state-2 {
display: none;
}

.box:focus .state-2 {
  display: block;
}

.box:focus .state-1 {
  display: none;
}

<div class="box" tabindex="0">
  <div class="state-1">Hello World</div>
  <div class="state-2">I'm Clicked!</div>
</div>

【讨论】：