使用HTML/CSS在图标悬停时显示文本？

我所追求的是在任何时候都连续显示三个图标。然后，一旦其中一个图标悬停在上方，文本将显示在所有三个图标下方。然后，当下一个图标悬停在上方时，会显示不同的文本等。当没有图标悬停在上方时，不会显示文本。我看到使用HTML和CSS做了一些非常类似的事情，所以我想知道我哪里出错了

提前谢谢

正文{
文本对齐：居中；
}
法兰西{
填充：20px；
}
#推特文本，
#facebookText，
#instagramText{
显示：无；
}
.fa twitter:hover+#twitterText{
显示：块；
}
.fa facebook:hover+#facebook文本{
显示：块；
}
.fa instagram:hover+#instagramText{
显示：块；
}

推特

Facebook

Instagram

用

~

重新播放

+

，表示后续同级

正文{
文本对齐：居中；
}
法兰西{
填充：20px；
}
#推特文本，
#facebookText，
#instagramText{
显示：无；
}
.fa推特：悬停~#推特文本{
显示：块；
}
.fa facebook:hover~#facebook文本{
显示：块；
}
.fa instagram:hover~#instagramText{
显示：块；
}

推特

Facebook

Instagram

用

~

重新播放

+

，表示后续同级

正文{
文本对齐：居中；
}
法兰西{
填充：20px；
}
#推特文本，
#facebookText，
#instagramText{
显示：无；
}
.fa推特：悬停~#推特文本{
显示：块；
}
.fa facebook:hover~#facebook文本{
显示：块；
}
.fa instagram:hover~#instagramText{
显示：块；
}

推特

Facebook

Instagram

“我想知道我哪里出了错”-在使用

+

时，请参阅“我想知道我哪里出了错”-在使用

+

时，请参阅