使用纯CSS切换文本显示:hover伪类

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>父级,但如果你想使用更多元素的块级别子项<p>,那么你应该使用它<div>作为父级.

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