如何解决悬停选择器不适用于这种情况?
这是我正在开发的“石头,剪刀,剪刀”游戏。当您将鼠标悬停在手上时,我正在尝试使子文本幻灯片进入,但我似乎无法使其正常工作。我想念什么?
.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>
解决方法
.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。