Combining .hover() and .replaceWith()
<p>I can't get this simple <code>.replaceWith()</code> to co-operate with a <code>.hover()</code>. Would appreciate some help. </p>

<p>I want it the text to change to EXPAND when I hover on it, and go back to SHOWS when I mouseout.  I can get the text to change to EXPAND, but I can't get the text to go back to the original, SHOWS.  </p>

<p>The <a href="http://jsfiddle.net/Sh95e/1/" rel="nofollow">JSFiddle</a> code for anyone kind enough to have a look.</p>

<pre><code>$(document).ready(function() {   
   $("p").hover(
      function () {
        $('#shows').replaceWith('&lt;h2&gt;Expand&lt;/h2&gt;');
      }, 
      function () {
        $('#shows').replaceWith('&lt;h2&gt;Shows&lt;/h2&gt;');
      }
    );
});
</code></pre>
