1

我现在正在学习和试验 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';
4

3 回答 3

1

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

CSS仅用于样式..

您可以使用:afterand :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/

于 2013-06-15T13:34:22.137 回答
0

尝试使用这个：

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

演示：点击这里查看！

于 2013-06-15T13:37:19.067 回答
0

您可以使用伪元素：

.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/

于 2013-06-15T13:33:45.653 回答