使用纯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>

我并不反对使用JavaScript（欢迎使用编码建议），但我更喜欢使用CSS

---

提前谢谢

你的想法是对的，有点

目标是拥有一个容器元素，该元素包含文本的两个部分
将该元素鼠标悬停在其上时，将为其分配伪类

：hover

。使用此选择器，您可以适当地重新设置子项的样式（下面，

.first

和

.second

）

请注意，我对下面的文本使用了

，对父元素使用了

，但是如果您希望对块级子元素（如更多

元素）执行此操作，则应改为使用

作为父元素

HTML:

---

我想你想要的是：

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

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

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

---

Fiddle:

不是

的有效子项。应使用

代替您的站点

对不起，您能提供您在网上找到它的链接吗？这可能会有帮助。请提供一个JSFIDLE链接来测试你！谢谢你抽出时间来回答，这真的很有帮助@嗯，不客气！这是一个很好的技巧。请投票选出其中两个答案，因为它们都是解决问题的好办法。太好了！刚到15岁，我终于可以投票了！再次感谢。

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

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

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

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