使用HTML / CSS在图标上悬停显示文字？

Question

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

提前致谢

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将+替换为~，表示继承兄弟

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;