我所追求的是三个图标始终连续显示。然后,一旦将其中一个图标悬停在上方,文本就会显示在所有三个图标下方。然后,一旦下一个图标悬停,不同的文本等。当没有图标悬停时,不显示文本。我看到使用 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>
最佳答案
将+
替换为~
表示后继兄弟
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>
关于html - 使用 HTML/CSS 在图标悬停时显示文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40873918/