Toggle text display using pure CSS :hover pseudo-class

css

Solution

I think you want something like:

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

with the following 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.

Fiddle: http://jsfiddle.net/audetwebdesign/zAt7f/

Problem

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> ``` And here is the CSS: ``` .noshow, p:hover .show { display: none } p:hover .noshow { display: inline } ``` I'm not opposed to using JavaScript (coding suggestions welcome), but I'd prefer it to stay in CSS. Thanks in advance!

Original source