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

当有人将鼠标悬停在文本上时,我希望文本完全改变.我发现在线代码应该可行,但事实并非如此.有什么建议？

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

提前致谢！

解决方法

我想你想要的东西：

<div class="wrap">
    <div class="show">
        <p>if {&nbsp;</p>
        <p>yourSite
            < awesome;&nbsp; </p>
                <p>solution = aislingDouglas (HTML5 + CSS3 +&nbsp;</p>
                <p>JavaScript + PHP);&nbsp;</p>
                <p>}&nbsp;</p>
                <p>else {&nbsp;</p>
                <p>solution = null;&nbsp;</p>
                <p>}&nbsp;</p>
    </div>
    <div class="noshow">
        <p>Need a website? &nbsp;</p>
        <p>You found your dream developer!&nbsp;</p>
        <p>And hey - I already helped you on the web,&nbsp;</p>
        <p>why not let me help you&nbsp;</p>
        <p>build an amazing site!&nbsp;</p>
    </div>
</div>

使用以下CSS：

.wrap {
    outline: 1px dotted blue;
    height: 300px;
}
.noshow,.wrap:hover .show {
    display: none
}
.wrap:hover .noshow {
    display: block
}

您需要一个外部容器来包装将打开和关闭的两个块.

为了获得最佳效果,请将高度设置为外部包装,否则您可以获得振荡显示/隐藏效果,因为由于文本数量不同,面板将自行调整大小,这意味着鼠标可能不会超出面板显示,因此悬停状态将立即恢复为不悬停,从而重新触发显示/隐藏效果.

小提琴：http://jsfiddle.net/audetwebdesign/zAt7f/