HTML/CSSを使用してアイコンホバーにテキストを表示しますか？

Question

私が何をしているのかは、常に3つのアイコンが連続して表示されることです。次に、アイコンの1つが上にホバーされると、3つすべての下にテキストが表示されます。次に、一度次のアイコンが上書きされると、異なるテキストなどが表示されます。アイコンが上に乗っていないときは、テキストは表示されません。私は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 +

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>