title: jQuery replace text of element on hover
body: <p>With jQuery, I'm trying to replace the text, including the span, inside these links on hover. Then when the user hover's off, the original text is displayed again.</p>
  
  <pre><code>&lt;a class="btn" href="#"&gt;
      &lt;img src="#" alt=""/&gt;
      &lt;span&gt;Replace me&lt;/span&gt; please
  &lt;/a&gt;
  
  &lt;a class="btn" href="#"&gt;
      &lt;img src="#" alt=""/&gt;
      &lt;span&gt;Replace me&lt;/span&gt; please
  &lt;/a&gt;
  </code></pre>
  
  <p>The final output should be</p>
  
  <pre><code>&lt;a class="btn" href="#"&gt;
      &lt;img src="#" alt=""/&gt;
      I'm replaced!
  &lt;/a&gt;
  </code></pre>
  
  <p>I'm toying around with but not sure how to replace it back. Any ideas?</p>
  
  <pre><code>$('.btn').hover(function(){
      $(this).text("I'm replaced!");
  });
  </code></pre>