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

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/

演示

Answer 2

您可以使用伪元素：

.bar::after {
    content: "Old Text";
}

.foo:hover + .bar::after {
    content: "New Text";
}

如果您关注可访问性，那么这不是一个好方法。您似乎想要定位一般兄弟元素，而不是与悬停元素相邻。如果是这种情况，您应该使用~组合器：

#test:hover ~ #test2::before { content: "Get";  }
#test:hover ~ #test3::before { content: "To";   }
#test:hover ~ #test4::before { content: "Know"; }
#test:hover ~ #test5::before { content: "Me";   }

您可以在此处看到效果：http://jsfiddle.net/QwFgp/

Answer 3

尝试使用它：

$(document).ready(function(){
   $("#test").hover(function(){
      $("#test2").html("different text");     
   });
   $("#test").mouseout(function(){
     $("#test2").html("Education");     
   });
});

演示：click here to see ！

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

3 个答案: