使用纯CSS切换文本显示：hover伪类 [英] Toggle text display using pure CSS :hover pseudo-class

问题描述

当有人将鼠标悬停在其上时，我想要完全更改文字。我发现代码在线，应该工作，但它不。有任何建议吗？

I want the text to change completely when someone hovers over it. I found code online that should work, but it doesn't. Any suggestions?

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

I'm not opposed to using JavaScript (coding suggestions welcome), but I'd prefer it to stay in 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
}

您需要一个外部容器来包装将要切换的两个块。

You need an outer container to wrap the two blocks that will be toggled on and off.

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

For best results, set a height to the outer wrapper or else you can get a oscillating show/hide effect since the panel will resize itself due to the different amount of text, which means that that the mouse may not be over the panel about to be displayed, so the hover state will be instantly reverted to not-hover, hence re-triggering the show/hide effect.

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

这篇关于使用纯CSS切换文本显示：hover伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！