悬停选择器不适用于这种情况？ [复制]答案

【问题标题】：hover Selector not working for this scenario? [duplicate]悬停选择器不适用于这种情况？ [复制]
【发布时间】：2020-08-28 15:04:38
【问题描述】：

这是针对我正在开发的石头、剪纸、剪刀游戏。当您将鼠标悬停在手上时，我试图让子文本滑入，但我似乎无法让它工作。我错过了什么？

.choices {
  display: flex;
  flex-direction: column;
}

.hands {
  height: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
}

.far {
  font-size: 5vh;
  cursor: pointer;
}

.subText {
  height: 50%;
  display: flex;
  justify-content: space-evenly;
}

#rock,
#paper,
#scissors {
  opacity: 0;
  height: 0;
  background-color: rgb(100, 100, 100);
  text-align: center;
  margin-top: 0.5vh;
  margin-left: 2vh;
  font-size: 2vh;
  transition: 0.3s;
}

.fa-hand-rock:hover+#rock {
  opacity: 1;
  height: 40%
}

.fa-hand-paper:hover+#paper {
  opacity: 1;
  height: 40%
}

.fa-hand-scissors:hover+#scissors {
  opacity: 1;
  height: 40%
}

<section class="choices">
  <div class="hands">
    <i class="far fa-hand-rock" onclick="game(1)"></i>
    <i class="far fa-hand-paper" onclick="game(2)"></i>
    <i class="far fa-hand-scissors" onclick="game(3)"></i>
  </div>
  <div class="subText">
    <h6 id="rock">Rock</h6>
    <h6 id="paper">Paper</h6>
    <h6 id="scissors">Scissors</h6>
  </div>
</section>

【问题讨论】：

不幸的是，您将无法使用当前页面结构的 CSS 来实现。这需要一个 JavaScript 解决方案。如果您将元素放在同一范围内，那么 CSS 会有所帮助。
谢谢我用了 JavaScript 方法。

标签： html css animation hover selector

【解决方案1】：

.hands{
  padding:40px;
}
.choices {
  display: flex;
  flex-direction: column;
}
.far {
  font-size: 20px;
  cursor: pointer;
  margin:0 50px;
}

.subText {
  display: block;
}

#rock,
#paper,
#scissors {
  opacity: 0;
  background-color: rgb(100, 100, 100);
  font-size: 12px;
  transition: 0.3s;
  display:inline-block;
  text-align:center;
  width:100px;
  margin:10px 15px;
}

.fa-hand-rock:hover~.subText #rock {
  opacity: 1;
}

.fa-hand-paper:hover~.subText #paper {
  opacity: 1;
}

.fa-hand-scissors:hover~.subText #scissors {
  opacity: 1;
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<section class="choices">
  <div class="hands">
    <i class="far fa-hand-rock" onclick="game(1)"></i>
    <i class="far fa-hand-paper" onclick="game(2)"></i>
    <i class="far fa-hand-scissors" onclick="game(3)"></i>
    <div class="subText">
      <h6 id="rock">Rock</h6>
      <h6 id="paper">Paper</h6>
      <h6 id="scissors">Scissors</h6>
    </div>
  </div>
</section>

【讨论】：