使用 :focus 通过按钮显示某些内容

Question

我有一个关于

:focus

的问题。我想要一个按钮/文本，单击时显示

<div class="contentbox2">

，但我真的很难做到这一点。我尝试了多种方法，但我只能使内容框在单击时显示，而不能将其与按钮“连接”。

我想要的是单击按钮后显示 div，然后单击屏幕上的任意位置时消失。

.morebuttonbox {
  height: 60px;
  width: 70px;
  background-image: repeating-linear-gradient( 0deg, #ecd0ff, #ecd0ff 1px, transparent 0, transparent 50%);
  background-size: 8px 8px;
  background-color: #fcf8f8;
  position: absolute;
  margin-top: 260px;
  border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
}

.morebutton {
  font-size: 14px;
  background: #e0e0e0;
  padding: 2px;
  width: 50px;
  text-align: center;
  margin: auto;
  margin-top: 16px;
  border: 1px ridge black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
}

.contentbox2 {
  background: white;
  height: 130px;
  width: 301px;
  border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
  position: absolute;
  margin-top: 190px;
  margin-left: 69px;
  z-index: 1;
  opacity: 0;
}

.byi {
  width: 270px;
  height: 50px;
  word-break: break-word;
  margin-left: 15px;
  margin-top: 10px;
}

.dni {
  width: 270px;
  height: 50px;
  word-break: break-word;
  margin-top: 20px;
}

.more:focus~.contentbox2 {
  opacity: 1;
  z-index: 10;
}

<div class="morebuttonbox">
  <div class="morebutton">
    <a href="#" class="more">
      more
    </a>

  </div>
</div>

<div class="contentbox2">
  <div class="byi">
    <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px;   border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;">byi</span> text text text text text text text text text text text text text ...

    <div class="dni">
      <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px;   border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;">dni</span> text text text text text text text text text text text text text ...

    </div>
  </div>
</div>

Answer 1

请参阅我对您的主要问题的评论。一种解决方案是使用

:has

选择器，然后将容器的同级作为目标：

.morebuttonbox {
  height: 60px;
  width: 70px;
  background-image: repeating-linear-gradient( 0deg, #ecd0ff, #ecd0ff 1px, transparent 0, transparent 50%);
  background-size: 8px 8px;
  background-color: #fcf8f8;
  position: absolute;
  margin-top: 260px;
  border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
}

.morebutton {
  font-size: 14px;
  background: #e0e0e0;
  padding: 2px;
  width: 50px;
  text-align: center;
  margin: auto;
  margin-top: 16px;
  border: 1px ridge black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
}

.contentbox2 {
  background: white;
  height: 130px;
  width: 301px;
  border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
  position: absolute;
  margin-top: 190px;
  margin-left: 69px;
  z-index: 1;
  opacity: 0;
}

.byi {
  width: 270px;
  height: 50px;
  word-break: break-word;
  margin-left: 15px;
  margin-top: 10px;
}

.dni {
  width: 270px;
  height: 50px;
  word-break: break-word;
  margin-top: 20px;
}

.morebuttonbox:has(.more:focus)~.contentbox2 {
  opacity: 1;
  z-index: 10;
}

<div class="morebuttonbox">
  <div class="morebutton">
    <a href="#" class="more">
      more
    </a>

  </div>
</div>

<div class="contentbox2">
  <div class="byi">
    <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px;   border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;">byi</span> text text text text text text text text text text text text text ...

    <div class="dni">
      <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px;   border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;">dni</span> text text text text text text text text text text text text text ...

    </div>
  </div>
</div>