Question

最初对用户可见的框是蓝色框，文本“嘿那里和你好”。用户点击hello后，带有文本“how to”的灰色框占据蓝框空格，hello文本更改为“关闭”通过css添加的文本内容。

现在当我点击关闭时，灰色框再次变为隐形，蓝色框再次出现，文字“嘿那里和你好”。我尝试使用焦点，但它没有帮助。

下面是我正在尝试使用的CSS。如果我得到一些帮助，那就太好了。焦点不起作用。只有css必须使用。没有锚链接或hrefs都是关于纯文本。

.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

使用复选框黑客

可以实现目标

参见下面的示例

#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中使用关闭，你可以使用：

#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

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

<强>观

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

示例代码段

＆＃13;

* { 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; }

＆＃13;

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

＆＃13;

<强>陷阱：

焦点从默认值更改后，相关属性会发生变化;然后失去焦点会将元素重置为默认值。这实际上意味着您不再需要单击灰色div进行重置。您可以单击文档上的任意位置，状态将重置。

<强>学习：

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

Onclick显示/隐藏div -only css并且没有href。没有jquery

2 个答案: