Html 悬停选择器不适用于此场景？

这是一个石头，布，剪刀的游戏，我正在工作。当你将鼠标悬停在手上时，我试图使子文本滑入，但我似乎无法让它工作。我错过了什么

。选择{
显示器：flex；
弯曲方向：立柱；
}
.双手{
身高：50%；
显示器：flex；
对齐项目：柔性端；
对正内容：空间均匀；
}
.远{
字体大小：5vh；
光标：指针；
}
.潜台词{
身高：50%；
显示器：flex；
对正内容：空间均匀；
}
#摇滚乐，
#纸，
#剪刀{
不透明度：0；
身高：0；
背景色：rgb（100100100）；
文本对齐：居中；
边际上限：0.5vh；
左边距：2vh；
字号：2vh；
过渡：0.3s；
}
.fa手摇：悬停+摇摆{
不透明度：1；
身高：40%
}
.fa手纸：悬停+纸张{
不透明度：1；
身高：40%
}
.fa手剪：悬停+剪刀{
不透明度：1；
身高：40%
}

摇滚乐
纸张
剪刀

.hands{
填充：40px；
}
.选择{
显示器：flex；
弯曲方向：立柱；
}
.远{
字体大小：20px；
光标：指针；
边际：0.50px；
}
.潜台词{
显示：块；
}
#摇滚乐，
#纸，
#剪刀{
不透明度：0；
背景色：rgb（100100100）；
字体大小：12px；
过渡：0.3s；
显示：内联块；
文本对齐：居中；
宽度：100px；
利润率：10px 15px；
}
.fa手摇滚：悬停~.潜台词#摇滚{
不透明度：1；
}
.fa手纸：悬停~.潜文本#纸{
不透明度：1；
}
.fa手剪：悬停~.潜台词#剪刀{
不透明度：1；
}

摇滚乐
纸张
剪刀

不幸的是，在当前页面结构中，您将无法使用CSS完成此操作。这需要一个JavaScript解决方案。如果你把你的元素放在同一个范围内，那么CSS可以帮助你。谢谢你，我使用了JavaScript方法。