Onclick 显示/隐藏仅 div 且不带 href 的 css。没有jQuery

Question

最初对用户可见的框是带有文本“hey there and hello”的蓝色框。用户点击hello后，带有“how to”文本的灰色框占据了蓝色框的空间，hello文本变为“关闭”通过css添加的文本内容。

现在，当我单击关闭时，灰色框再次消失，蓝色框再次出现，并带有文本“嘿，你好”。我试过使用焦点，但它没有帮助。

下面是我尝试使用的 css。如果我能得到一些帮助，那就太好了。对焦不灵了。只需要使用 css。没有锚链接或 href，它都是关于纯文本的。

.blue-card {
  height: auto;
  min-height: 100px;
  display: block;
  padding: 1em;
  background: #FFFFFF;
  box-shadow: 0 6px 12px 0 rgba(27, 29, 31, 0.05);
  border-radius: 10px;
  position: relative;
  margin-bottom: 10px;
}



.grey-card {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  margin: 20px;
  max-height: 155px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2em;
  font-size: 14px;
  line-height: 24px;
  transition: 0.25s;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transform: scale(1.4) translateY(-100px);
  -webkit-transform: scale(1.4) translateY(-100px);
  -moz-transform: scale(1.4) translateY(-100px);
}

.grey-card {
  padding: 10px;
  font-size: 13px;
  min-height: 100px;
}

.grey-card {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  -webkit-transform: scale(1) translateY(0);
  -moz-transform: scale(1) translateY(0);
}

.grey-card-text {
  display: none;
}

.blue-box-text:focus~.grey-box {
  display: block;
}

.grey-box-text:focus~.blue-box-text {
  display: block;
}

.grey-box-text:before {
  content: "Close";
  font-size: 12px !important;
}

<div class="box-main">
  <div class="blue-card">
    <p class="blue-box-description">hey there</p>
    <div class="gs-c">
      <span class="blue-box-text">hello</span>
    </div>
  </div>
  <div class="grey-card">
    <h4 class="grey-box-text">How to?</h4>
  </div>
</div>

Answer 1

有一种技巧可以使用 Check box hack 来实现您的目标

请看下面的例子

#myid {
  display: none;
}

#mylabel:after {
  content: 'Hello';
}

#myid:checked~#mylabel:after {
  content: 'Close';
}

<div>
  <input id="myid" type="checkbox">
  <label id="mylabel" for="myid"></label>
</div>

如果您想在 html 中使用文本 Hello 并在 css 中使用 Close 文本，您可以使用：

#myid {
  display: none;
}

.box {
  position: relative;
}

#mylabel {
  display: inline-block;
}

#myid:checked~#mylabel:after {
  content: 'Close';
  position: absolute;
  top: 0;
}

#myid:checked~#mylabel {
  width: 0px;
  overflow: hidden;
}

<div class="box">
  <input id="myid" type="checkbox">
  <label id="mylabel" for="myid">Hello</label>
</div>

Answer 2

您可以使用flexbox 技巧来更改您的盒子的顺序。这将使您能够以两种方式使用相邻兄弟选择器，从而解决 CSS 中缺少上一个兄弟选择器的问题。

想法：

将包装容器设置为display:flex。让你的目标divs 相对于这个包装父级绝对定位。使用tabindex 强制div 获得焦点。更改焦点时彼此的顺序以及不透明度和位置以辅助transition 效果。

示例片段：

* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }
.wrap { display: flex; position: relative; width: 260px; }
.blue, .gray {
  position: absolute;
  width: 120px; height: 3em; 
  margin: 4px; padding: 8px;
  cursor: pointer; transition: all 0.5s;
}
.blue { 
  order: 1; left: 0; opacity: 1;
  background-color: #33d; 
}
.gray { 
  order: 2; left: 50%; opacity: 0;
  background-color: #bbb; 
}
.blue:focus + .gray { order: 1; left: 0; opacity: 1;}
.blue:focus { order: 2; left: 50%; opacity: 0; }

.gray:focus + .blue { order: 1; left: 0; opacity: 1; }
.gray:focus { order: 2; left: 50%; opacity: 0; }

.blue::after { content: 'Hello'; color: #fff; }
.gray::after { content: 'Close'; color: #333; }

<div class="wrap">
  <div class="blue" tabindex="1"></div>
  <div class="gray" tabindex="2"></div>
</div>

---

陷阱：

一旦焦点从默认值改变，相关属性也随之改变；然后失去焦点会将元素重置为默认值。这实际上意味着您不再需要单击灰色的div 来重置。您可以单击文档上的任意位置，状态将重置。

学习：

虽然这实现了你想要的，即没有锚点、没有输入、没有复选框、没有 JavaScript 等，但这不会带你走太远，而且除了表明它可以以某种方式完成之外没有任何意义。使用专门用于特定目的的工具。