使用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在圖標懸停上顯示文本？

回答

相關問題