CSS 在悬停另一个对象时更改对象

Question

我现在正在学习和试验 CSS。我有带有菜单按钮的 div，我想在悬停其中一个按钮时更改其他按钮文本。这是 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 更改为“获取”...

<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';

Answer 1

您不能使用 CSS 更改内容...

CSS 只是为了样式..

您可以使用 :after 和 :before(伪元素内容)模拟这样的内容，但这意味着内容将不是真的可以访问(结束原始内容也需要在 CSS 中定义)。

<div id="menu">
  <h3 id="test">About me</h3>
  <h3 id="test2"></h3>
  <h3>Projects</h3>
  <h3>Photos</h3>
  <h3>Contact</h3>
</div>

和

#test2:before{
    content:'Education';
}
#test:hover + #test2:before {
    opacity:0.8;
    content:'No Education';
} 

演示在 http://jsfiddle.net/gaby/65rxA/

---

或者，您可以在不同的标签中提供这两种内容，并显示/隐藏您想要的内容..

<div id="menu">
     <h3 id="test">About me</h3>
     <h3 id="test2">
         <span class="original">Education</span>
         <span class="alternate">Alternate</span>
     </h3>
     <h3>Projects</h3>
     <h3>Photos</h3>
     <h3>Contact</h3>
</div>

和

#test:hover + #test2 {
    opacity:0.8;
}
#test:hover + #test2 > .original, .alternate {
    display:none;
}
#test:hover + #test2 > .alternate {
    display:inline;
}

演示在 http://jsfiddle.net/gaby/65rxA/2/