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

我所追求的是连续三次显示三个图标。然后，一旦图标中的一个悬停在上面，所有三个图标都会显示文字。然后，一旦下一个图标悬停，不同的文字等。当没有图标被悬停时，没有文字显示。我看到使用HTML和CSS完成类似的事情，所以想知道我哪里出错了。使用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>

来源

2016-11-29 OVOSZN

_“所以想知道我哪里出了问题”_ - 在使用'+'时，请参阅https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors – CBroe

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>

来源

2016-11-29 19:17:02 jafarbtech

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

回答

相关问题