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

提前感谢！

- ummlayth

---

<p> 不是 <span> 的有效子元素。 - Niet the Dark Absol

在 <p>yourSite < awesome;&nbsp;<br /></p> 中，应该使用 < 代替 <。 - kishu27

抱歉，**这是您要找的吗？** - Mee

你能给一下你在哪里网上找到这个的链接吗？这可能会有帮助。 - sinθ

请提供一个JSfiddle链接以进行测试。 - Roman Nazarkin

我最初在这里找到它：http://www.neowin.net/forum/topic/576913-change-text-on-hover-css/ - ummlayth

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

- Kiirani

---

谢谢！感谢您抽出时间回答——真的很有帮助！ - ummlayth

Answer 2

我认为您想要的是这样的东西：

我认为您想要的是：

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

- Marc Audet

---

@ummlayth，非常欢迎您！这是一个很好的技巧。请给这些答案点赞，因为它们都是解决问题的好方法。 - Marc Audet

太棒了！终于达到15级可以点赞了 - 点赞完成！再次感谢。 - ummlayth