css - 使用纯 CSS 切换文本显示 :hover pseudo-class

Question

我希望当有人将鼠标悬停在上面时，文本会完全改变。我在网上找到了应该可以工作的代码，但没有。有什么建议吗？

<span class="show">
     <p>if {&nbsp;<br /></p>
     <p>yourSite < awesome;&nbsp;<br /></p>
     <p>solution = aislingDouglas (HTML5 + CSS3 +&nbsp;<br /></p>
     <p>JavaScript + PHP);&nbsp;<br /></p>
     <p>}&nbsp;<br /></p>
     <p>else {&nbsp;<br /></p>
     <p>solution = null;&nbsp;<br /></p>
     <p>}&nbsp;</p>
 </span>

 <span class="noshow">
     <p>Need a website? &nbsp;<br /></p>
     <p>You found your dream developer!&nbsp;<br /></p>
     <p>And hey - I already helped you on the web,&nbsp;<br /></p>
     <p>why not let me help you&nbsp;<br /></p>
     <p>build an amazing site!&nbsp;<br /></p>
 </span>

这是 CSS:

.noshow, p:hover .show { display: none }
p:hover .noshow { display: inline }

我不反对使用 JavaScript(欢迎提供编码建议)，但我更希望它保留在 CSS 中。

提前致谢!

Answer 1

你的想法是对的，有点……

我们的目标是拥有一个包含两部分文本的容器元素。
当鼠标悬停在该元素上时，它会被分配伪类 :hover。 .使用此选择器，您可以适本地重新设置子项(下面的 .first 和 .second )的样式。

请注意，我使用了 <span>对于文本和<p>对于下面的 parent ，但如果你想用 block 级 child 来做这件事，比如更多<p>元素，那么你应该使用 <div>作为 parent 。

http://jsfiddle.net/G28qz/

HTML:

<p class="hovertext">
    <span class="first">This is what you see first</span>
    <span class="second">But this shows up on mousehover</span>
</p>

CSS:

/* Hide the second piece of text by default */
p.hovertext .second {
     display:none;
}

/* Hide the first piece of text on hover */
p.hovertext:hover .first {
     display:none;
}

/* Re-show the second piece of text on hover */
p.hovertext:hover .second {
    display:inline;
}