使用html/css在图标悬停上显示文本

Question

我追求的是要始终连续显示的三个图标。然后，一旦将其中一个图标悬停在整个三个图标上，文字显示在这三个图标下方。然后，一旦下一个图标悬停，文本等不同的文字等。当没有图标徘徊时，则不会显示文本。我看到使用HTML和CSS完成了非常相似的事情，所以想知道我出了问题的位置。

预先感谢

body {
  text-align: center;
}
.fa {
  padding: 20px;
}
#twitterText,
#facebookText,
#instagramText {
  display: none;
}
.fa-twitter:hover + #twitterText {
  display: block;
}
.fa-facebook:hover + #facebookText {
  display: block;
}
.fa-instagram:hover + #instagramText {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-twitter fa-5x"></i>
<i class="fa fa-facebook fa-5x"></i>
<i class="fa fa-instagram fa-5x"></i>
<p id="twitterText">Twitter</p>
<p id="facebookText">Facebook</p>
<p id="instagramText">Instagram</p>

Answer 1

用 ~ replae +表示后继者sibling

body {
  text-align: center;
}
.fa {
  padding: 20px;
}
#twitterText,
#facebookText,
#instagramText {
  display: none;
}
.fa-twitter:hover ~ #twitterText {
  display: block;
}
.fa-facebook:hover ~ #facebookText {
  display: block;
}
.fa-instagram:hover ~ #instagramText {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-twitter fa-5x"></i>
<i class="fa fa-facebook fa-5x"></i>
<i class="fa fa-instagram fa-5x"></i>
<p id="twitterText">Twitter</p>
<p id="facebookText">Facebook</p>
<p id="instagramText">Instagram</p>