Html 如何在悬停时使用flexbox显示其他文本

我试图在我创建的FlexBox下面显示一些文本，因此当用户将鼠标悬停在某个框上时，将显示特定文本

代码：

.Reports容器{
显示器：flex；
柔性流：行换行；
证明内容：中心；
对齐项目：居中；
高度：自动；
垫底：6.5px；
}
.Reportsbox{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.Reports容器>div:悬停{
背景色：#777777！重要；
}
.Reports container>div{
高度：90px；
宽度：200px；
浮动：左；
文本对齐：居中；
背景色：#fff；
边界半径：5px；
利润率：0 10px 0 10px；
位置：相对位置；
字体：20px“开放式Sans”，无衬线；
字体大小：粗体；
颜色：#fff；
保证金：6.75px 6.5px 0 6.75px；
}
.报告容器a{
颜色：#fff；
文字装饰：无；
线高：90px；
}
.报告容器a:悬停{
颜色：#fff；
文字装饰：无；
线高：90px；
}
#Reportsbox1{
颜色：#fff；
文字装饰：无；
}
#Reportsbox2{
颜色：#fff；
文字装饰：无；
}
#报告-Detail-1{
显示：无；
}
#Reportsbox1:hover#Report-Detail-1{
显示：内联；
}

要在报告框1上显示的测试消息悬停

当前的html结构不允许您仅使用css来实现这一点，如果您想保持html结构，请使用JS来显示文本，我认为问题出在css的最后一条规则中

#Reportsbox1:hover#Report-Detail-1

：空格表示您希望

#Report-Detail-1'

在

#Reportsbox1:hover

的内部，您需要将

#Report-Detail-1

移动到

#Reportsbox1

的内部。谢谢大家的帮助和指点。我可能对CSS太有野心了，我会在不需要额外wordpress插件的情况下研究JS选项。目前的html结构不允许你只使用CSS，如果您想保留html结构，请使用JS显示文本，我认为问题出在css的最后一条规则中

#Reportsbox1:hover#Report-Detail-1

：空格表示您希望

#Report-Detail-1'

在

#Reportsbox1:hover

的内部，您需要将

#Report-Detail-1

移动到

#Reportsbox1

的内部。谢谢大家的帮助和指点。我可能对CSS太有野心了，我会在不需要额外wordpress插件的情况下研究JS选项。