私は今CSSを学び、実験しています。メニュー ボタンを含む div があり、そのうちの 1 つをホバーするときに他のボタンのテキストを変更したいと考えています。HTML は次のとおりです。
<div id="menu">
<h3 id="test">About me</h3>
<h3 id="test2">Education</h3>
<h3>Projects</h3>
<h3>Photos</h3>
<h3>Contact</h3>
</div>
CSSでできることがわかりました:
#test:hover+#test2 {
opacity:0.8;
}
次に、#test をホバーすると、#test2 の透明度が変化します。それはとてもクールです。しかし、#test2 テキストを次のように変更するにはどうすればよいですか。
#text2=<h3>Different text</h3>
挨拶します。
編集:それは良いです。しかし、なぜこれが機能しないのですか?ホバリング時に #test2 が 'Get' に変更されるだけです...
<div id="menu">
<h3 id="test">About me</h3>
<h3 id="test2"></h3>
<h3 id="test3"></h3>
<h3 id="test4"></h3>
<h3 id="test5"></h3>
</div>
#test2:before{
content:'Education';
}
#test3:before{
content:'Projects';
}
#test4:before{
content:'Photos';
}
#test5:before{
content:'Contact';
}
#test:hover+#test2:before {
content:'Get';
}
#test:hover+#test3:before {
content:'to';
}
#test:hover+#test4:before {
content:'know';
}
#test:hover+#test5:before {
content:'me';