title: Toggle text display using pure CSS :hover pseudo-class
body: <p>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?</p>
  
  <pre><code>&lt;span class="show"&gt;
       &lt;p&gt;if {&amp;nbsp;&lt;br /&gt;&lt;/p&gt;
       &lt;p&gt;yourSite &lt; awesome;&amp;nbsp;&lt;br /&gt;&lt;/p&gt;
       &lt;p&gt;solution = aislingDouglas (HTML5 + CSS3 +&amp;nbsp;&lt;br /&gt;&lt;/p&gt;
       &lt;p&gt;JavaScript + PHP);&amp;nbsp;&lt;br /&gt;&lt;/p&gt;
       &lt;p&gt;}&amp;nbsp;&lt;br /&gt;&lt;/p&gt;
       &lt;p&gt;else {&amp;nbsp;&lt;br /&gt;&lt;/p&gt;
       &lt;p&gt;solution = null;&amp;nbsp;&lt;br /&gt;&lt;/p&gt;
       &lt;p&gt;}&amp;nbsp;&lt;/p&gt;
   &lt;/span&gt;
  
   &lt;span class="noshow"&gt;
       &lt;p&gt;Need a website? &amp;nbsp;&lt;br /&gt;&lt;/p&gt;
       &lt;p&gt;You found your dream developer!&amp;nbsp;&lt;br /&gt;&lt;/p&gt;
       &lt;p&gt;And hey - I already helped you on the web,&amp;nbsp;&lt;br /&gt;&lt;/p&gt;
       &lt;p&gt;why not let me help you&amp;nbsp;&lt;br /&gt;&lt;/p&gt;
       &lt;p&gt;build an amazing site!&amp;nbsp;&lt;br /&gt;&lt;/p&gt;
   &lt;/span&gt;
  </code></pre>
  
  <p>And here is the CSS:</p>
  
  <pre><code>.noshow, p:hover .show { display: none }
  p:hover .noshow { display: inline }
  </code></pre>
  
  <p>I'm not opposed to using JavaScript (coding suggestions welcome), but I'd prefer it to stay in CSS.</p>
  
  <p>Thanks in advance!</p>