Toggle text display using pure CSS :hover pseudo-class

Question

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!

Answer 1

You've got the right idea, sort of...

The goal is to have a container element which holds both sections of text.
When that element is moused over it gets assigned the pseudoclass :hover. Using this selector, you can re-style the children (below, .first and .second) appropriately.

Note that I've used <span> for the text and <p> for the parent below, but if you want to do this with block level children like more <p> elements, then you should use <div> as the parent instead.

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

Answer 2

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/